「Vue.js」v-else-ifディレクティブのサンプル
環境
Vue2.6.14
書式
<div v-if="条件式1"> 処理コード1 </div> <div v-else-if="city === 'oosaka'"> 処理コード2 </div> <div v-else> 処理コード3 </div>
v-else-if は、名前が示唆するように、v-if の “else if block” として機能します。また、複数回連結することもできます:
v-else と同様に、v-else-if 要素は v-if 要素またはv-else-if 要素の直後になければなりません。
使用例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 最新IT技術情報_arkgame.com</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <div v-if="city === 'tokyo'"> 東京 </div> <div v-else-if="city === 'oosaka'"> 大阪 </div> <div v-else-if="city === 'fukuoka'"> 福岡 </div> <div v-else> 横浜 </div> </div> <script> new Vue({ el: '#app', data: { city: 'oosaka' } }) </script> </body> </html>
実行結果
大阪