#ディレクティブ
ディレクティブとは接頭辞 v- が付いた属性のこと
今回は基本的なディレクティブについてまとめます。
##v-text
index.html
<body>
<div id="text">
<div v-text="message"></div>
</div>
</body>
<script>
var text_hello = new Vue({
el: '#text',
data: { message: 'Hello World!' }
})
</script>
上記のソースのスクリプトでtext要素にmessageデータを定義し、
html内でv-textを使用しmessageを呼び出すことで定義したmessageの内容が表示されます。
##v-for
index.html
<body>
<div id="text">
<li v-for="(msg, key) in message">
{{ key }}:{{msg}}
</li>
</div>
</body>
<script>
var text_hello = new Vue({
el: '#text',
data: { message: {
sample1:'hello',
sample2:'world',
sample3:'hello_world'
}
}
})
</script>
v-forで配列の内容をループします。
今回keyとvalue両方を出そうと思い
<li v-for="(msg, key) in message">
とすると想定の結果とは逆でしたので今後気を付けたいところ
##v-if
index.html
<body>
<div id="text">
<input type="checkbox" @click="change" checked>
<span v-if="seen">
<li v-for="(msg, key) in message">
{{ key }}:{{msg}}
</li>
</span>
</div>
</body>
<script>
var text_hello = new Vue({
el: '#text',
data: { message: {
sample1:'hello',
sample2:'world',
sample3:'hello_world'
},
seen: true
},
methods: {
change: function(e) {
this.seen = e.target.checked
}
}
})
</script>
上記ではチェックボックスの値でtrue,falseを認識し、messageを表示するかを制御します。
###チェックあり
###チェックなし
#参考
Vue.js入門