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>

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選