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>
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。