過去バージョン

v-ifディレクティブを使用することで条件分岐処理を実行することが出来る。

 

ifの実装例

html
v-if="true_data">This is True     v-if="false_data">This is False

 

js
var app = new Vue({   el: '#app',   data: {     true_data: true,     false_data: false,   } })

 

出力結果

This is True

 

else if と else の実装

html
v-if="false_data">     if     v-else-if="true_date">     else if     v-else="true_date">     else

 

出力結果

else if

 

templateによるグループ化

ifを付けた要素の子要素が複数ある場合は正しく評価されない。

以下、正しく評価されない実装例

html
<div v-if="true_data">     aaa     bbb div>

 

正しく評価するにはtemplateタグを使用する必要がある。

html
<template v-if="true_data">     aaa     bbb template>