【Vue.js】v-showの使い方と書き方について

条件の分岐を行うときにv-ifやv-showなどを使うと思います。

どちらも条件の分岐をするときに使います。

ですがこの2つは似ていますが特徴がそれぞれ違うのでそのときの場面によって使い分ける必要があると思います。

v-ifについては以前の記事で紹介していますが今回はv-showについて紹介していきたいと思います。

v-showとは

v-showは条件が一致したときに要素を表示されることができます。

ユーザーの操作によって特定の要素を表示したり非表示にしたりすることができるのでよくあるWebページで表示非表示などの動作を表現することができます。

<要素名 v-show="〇〇〇〇" />

v-showにtrueとfalseがどのように表示されるのかを見ていきたいと思います。

<div id="app">
  <p v-show="false">false</p>
  <p v-show="true">true</p>
</div>

v-showにtrueを指定するとタグが表示されfalseしません。

<div id="app1">
  <div v-show="check">チェックされました</div>
  <div v-show="!check">チェックされません</div>
</div>

var app1 = new Vue({
  el: '#app1',
  data: {
    check: true
  }
})

dataのcheckにはtrueが指定されているので

<div v-show=”check”>チェックされました</div>が表示されます。

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

リンク

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。

リンク