Vue.jsにはいろいろディレクティブと呼ばれるものがあります。
このディレクティブはhtmlタグ内に記述できます。
今回はv-showディレクティブについて勉強してみたのでまとめてみます。
書き方は
v-show="条件式"
という感じです。条件式がtrueの場合にHTMLが表示されます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="app" v-show="age >= 20"> | |
| {{name}}:{{age}}<br> | |
| </div> |
ageが20以上の場合、mustache（マスタッシュ）構文が表示されます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <div id="app" v-show="age >= 20"> | |
| {{name}}:{{age}}<br> | |
| </div> | |
| <script src="https://jp.vuejs.org/js/vue.js"></script> | |
| <script> | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| name: 'nakamura', | |
| age: 30 | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
ageは30なので、表示されます。Chromeのコンソールからageを20未満にして表示非表示が切り替わることを試してみます。
Vue.jsのv-showディレクティブ
次回はユーザ操作を検知するv-onディレクティブを学習します！
和歌山大学工学部卒業。フリーターのち正社員として勤務しています！
vue.js勉強中です。
コメント