v-から始まるディレクティブのまとめ記事はこちら↓
v-if
if文。条件がtrueもしくはfalseの時に実行される。
<div id="app">
<p v-if="text">trueです。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
text: true,
}
})
</script>
falseの時に表示したい場合、textをfalseに変更して、v-ifディレクティブのdata参照に「！」をつける。
大概のプログラミング言語において、!はtrueからfalseへ反転する意味を持つ。
<div id="app">
<p v-if="!text">falseです。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
text: false,
}
})
</script>
v-else
上記のifで設定した条件でないときに実行されるディレクティブ。
注：v-elseは必ずv-if文に繋げて書かなければならない。（必ずifの下に来る）
ifとelseの間に何かしらのコードを書き込んだ場合、動作しない。
<div id="app">
<p v-if="text">true</p>
<p v-else>false</p>
</div>
<script>
new Vue({
el: '#app',
data: {
text: true,
}
})
</script>
textがtrueの時「true」と表示され、textがfalseの時「false」と表示される。
v-else-if
複数の条件を設けたい時、ifとelseの間にv-else-ifを用いることができる。
dataに追加条件を記載して、テンプレート構文（HTML）にv-else-ifを追加する。
<div id="app">
<p v-if="text">true</p>
<p v-else-if="text2">textがfalseでtext2がtrueの時</p>
<p v-else>false</p>
</div>
<script>
new Vue({
el: '#app',
data: {
text: false,
text2:true
}
})
</script>
