Vue.js　条件付きレンダリング

前回の記事はこちら
Vue.js クラスとスタイルのバインディング

今回は条件付きレンダリングで以下を説明します。
・v-if と　ｖ−else
・v-else-if

v-ifとv-else

jsfiddleで実際に記述しながら読むことをおすすめします。

v-ifを使うことで真偽値によって要素の表示非表示を切り替えることができます。
真偽値がtrueの場合はyes、falseの場合はNoと表示してみます。

index/html

<div id="app">
  <p v-if="toggle">
    Yes
  </p>

  <p v-else>
    No
  </p>

</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:{
   toggle:true
  }
})

実行結果

データオプションtoggleの真偽値によって表示要素を切り替えています。
v-elseディレクティブはv-if(もしくはv-else-if)ディレクティブの
直後に記載する点に注意してください。

v-else-if

信号機の色を示すプログラムを作ります。

red:stop/yellow:caution/blue:go/それ以外:not red/yellow/blueと出力してみます。

index/html

<div id="app">
  <p v-if="color==='red'">
    stop
  </p>
  <p v-else-if="color==='yellow'">
    caution
  </p>
  <p v-else-if="color==='blue'">
    go
  </p>
  <p v-else>
    not red/yellow/blue
  </p>
</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:{
    color: 'brawn'
  }
})

実行結果

初期値redをyellowにすると表示される文字列がcautionに変わりました。

次回はイベントハンドリングです。
Vue.js イベントハンドリング