0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-08

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

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

今回は条件付きレンダリングで以下を説明します。
・v-if と v−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
  }
})

実行結果
Image from Gyazo

データオプション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'
  }
})

実行結果
Image from Gyazo

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?