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

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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

v-showとは

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

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

v-showの基本的な書き方

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

v-showにtrueとfalseを指定してみる

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

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

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

v-showとdataを使う

html

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

js

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

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

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

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く!Vue.js超入門

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

Vue.js入門 基礎から実践アプリケーション開発まで

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

vue.js
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました