More than 3 years have passed since last update.

Vue.js 基本的なディレクティブ　v-if編

Last updated at 2021-09-19Posted at 2021-09-18

#はじめに
Vue .jsを学習し始めたのでアウトプットしていきます
#v-if
要素の表示・非表示を切り替えをDOMレベルで削除

index.html

<div id="app">
  <p v-if="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>
    <!---->
 </div>

となっておりp要素はDOMレベルで削除されていることがわかります。

###注意
要素を頻繁に表示/非表示を繰り返す場合描画コストが高くなる恐れがあります。
その場合は、cssにのdisplayプロパティを利用して表示/非表示を切り替える　　v-showディレクティブを利用する。