v-showの使い方-Vue.js

ここでは、v-showディレクティブの使い方をサンプルコードを参考に解説していきます。

v-showの基本的な使い方

扱っているデータの状態に応じて条件分岐し、表示を切り替えたいとき、v-showディレクティブを使うことができました。 記述の形式は以下の通りです。

v-show="変数"  v-show="条件式"

基本的な使い方はv-ifと同じです。 v-ifと違う点は描画の仕方です。v-ifは表示されないときDOM自体が描画されませんが、v-showでは常にDOMを描画し、表示・非表示の切り替えはdisplayプロパティによって行われます。

実際に動くコードとその結果を見てみます。

<div id="app">
  <div v-show="flag">表示される</div>
  <div v-show="!flag">表示されない</div>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      flag: true
    }
  })
</script>

<div id="app">
  <div>表示される</div>
  <div style="display: none;">表示されない</div>
</div>

templateタグ

複数を同時に切り替えたいときにv-ifではtemplateタグを使うことができました。しかし、v-showでは使えないので注意が必要です。

まとめ

今回はv-showの基本的な使い方を解説しました。 同様に条件によって表示を切り替えるv-ifディレクティブというものがあるので、別の記事で解説したいと思います。