【Vue.js】v-else-if

#はじめに
こんにちは！
今回は【Vue.js】v-else-ifについてアウトプットしていきます！

#v-else-ifとは
v-if→v-else-if→v-elseといった感じで使われます。
v-ifでない時はv-else-ifが表示される。そうでもない時はv-elseというイメージです。
Javascriptでいうところのelse ifに相当します。

#書き方・解説
例題として信号機の色の示す意味を出力するプログラムを書いていきます。

HTML

  <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>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     color:'red'
   }
 })

Pタグの中に「もしcolorの中身がredだったら、Stopを表示する。」
といったように、「もしcoolorの中がredではなくyellowだったらCautionと表示する。」
v-if→v-else-if→v-elseを使っていきます。
また、v-else-ifの場合は複数回使用可能です。
Vue.jsのdata内にcolorプロパティを設置し値を入力することで表示されます。
最後に、v-if→v-else-ifどちらでもない場合はv-elseが表示されるようになります。

#まとめ
記述の順番はv-if→v-else-if→v-else。
v-else-ifは複数回使用可能。

#最後に
今回はv-else-ifについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！