元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【Vue.js】条件付きレンダリング:v-ifとv-showで表示の制御

v-ifとv-showを使って表示を制御します。trueの時に表示して、falseの時に非表示にします。HTMLのコードがどのようになるのか確認します。v-ifとv-showの違いについても書きます。

v-ifで表示の制御

v-ifで表示の出し分けをします。

<div id="app">
  <p v-if="err">エラーです。</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    err: true
  }
});

err: trueなので、pタグは表示されます。ブラウザの検証でElementsを確認すると、<p>エラーです。</p>と記述されているのが確認できます。

次にerr: falseに変更すると、該当箇所は表示されません。

var app = new Vue({
  el: '#app',
  data: {
    err: false // falseに変更
  }
});

ブラウザの検証でElementsを確認すると、該当箇所のタグが無くなりコメントアウトになっているのが確認できます。

複数の要素を出し分ける

  • v-if
  • v-else-if
  • v-else

v-ifの他にv-else-ifv-elseもあります。複数の要素を出し分けるのに使います。

<div id="app">
  <p v-if="type === 'A'">Apple</p>
  <p v-if="type === 'B'">Banana</p>
  <p v-if="type === 'C'">Cherry</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    type: 'A'
  }
});

v-showで表示の制御

v-showは、v-ifと使い方はほとんど同じです。違いは、v-showではdisplayプロパティで表示をを切り替えている点です。

<div id="app">
  <p v-show="err">表示されています。</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    err: true
  }
});

err: falseの場合は、下図のようになります。

ディレクティブ

v-〇〇のことをディレクティブと言います。HTMLのタグに属性を指定することができます。ディレクティブは、HTML側とVue.js側の紐付けをしています。ディレクティブは、いくつか種類があります。その使い方を勉強していきます。

参考サイト

» HTML入門のまとめはこちらです。