More than 3 years have passed since last update.

Vue.js v-show編

Posted at 2021-09-19

#はじめに
Vue .jsを学習し始めたのでアウトプットしていきます

#v-show
要素の表示/非表示を切り替える

v-ifとの違い　
要素の表示・非表示を切り替えをDOMレベルで削除ではなくCSSのdisplayプロパティをON/OFF

index.html

<div id="app">
  <p v-show="thank">
  　Thankyou
  </p>
</div>

app.js

var app = new Vue({
  el: '#app',
  data: {
  	tank: true
  }
})

上記のようにデータの真偽値をtrueにすれば画面に「Tankyou」が表示されます

app.js

var app = new Vue({
  el: '#app',
  data: {
  	tank: false
  }
})

上記のようにデータの真偽値をfalseにすれば画面に何も表示されません。
ここで検証ツールを開いてみると

<body>
 <div id="app>
    <p style="display: none;"> Thankyou </p>
 </div>

となっておりp要素がCSSのdisplay: none;により非表示になっています。

##学び
要素を頻繁に表示/非表示を繰り返す用途の場合描画コストを抑える事ができて　v-if　よりも今回の　v-show
を使った方が良い