Vue.jsディレクティブ
ディレクティブとは
v-で始まる特別な属性のことです。
その名前の通り、vue.jsに何らかの指令を行う仕組みです。
ディレクティブの例
・v-bind
・v-if
・v-show
・v-for
・v-on
・v-model
v-bind
v-bindを要素に追加すると属性のデータバインディングをしてくれます。
index.html
<div id="app">
<input type="text" v-bind:value="message"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el: '#app',
data: {
message: "hello"
}
})
ブラウザ
v-if
v-ifを要素に追加すると、条件分岐させることができます。
trueで表示、falseで非表示となります。
index.html (trueの時)
<div id="app">
<p v-if="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
inde.js (trueの時)
var app = new Vue({
el: '#app',
data: {
toggle: true
}
})
ブラウザ (trueの時)
検証ツール (trueの時)
index.html (falseの時)
<div id="app">
<p v-if="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
inde.js (falseの時)
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})
検証ツール (falseの時)
v-show
v-showを要素に追加すると、要素の表示/非表示を切り替えることができます。
要素の表示/非表示を切り替えるにあたって、CSSのdisplayプロパティの値を切り替えます。
index.html (trueの時)
<div id="app">
<p v-show="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
inde.js (trueの時)
var app = new Vue({
el: '#app',
data: {
toggle: true
}
})
検証ツール (trueの時)
index.html (falseの時)
<div id="app">
<p v-show="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
inde.js (falseの時)
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})
検証ツール (falseの時)
