Vue.js 条件分岐 v-if/v-else/v-elsif/v-show/複数条件/OR/AND
よく忘れるVue.jsのifと同じ感覚で使うv-ifの構文です。
v-if/v-else/v-elseif 基本構文
<div v-if="name === 'yamada'">
</div>
<div v-else-if="name === 'tanaka'"> <!-- 2.1.0から -->
</div>
<div v-else>
</div>
v-if 複数条件/AND
<div v-if="name === 'yamada' && class === 'b'">
</div>
v-if または/OR
<div v-if="name === 'A' || class === 'B'">
</div>
v-show
- 使い方は
v-if
と同じ
<div v-show="name === 'A' || class === 'B'">
</div>
v-ifとの違い
v-else-if
v-else
が使えない- マッチしなかった時の出力が異なる
{{ name }} <!-- tanaka -->
<div v-if="name == "sato">{{ name }}</div>
<div v-show="name == "sato">{{ name }}</div>
<!-- 実行結果 -->
<!---->
<div style="display: none;">tanaka</div>