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

2575 ワード
Vue.js Vue.js テキストリンク

はじめに

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ディレクティブを利用する。

JAva操作mongodbによる日、週、月のグループ統計
[LeetCode] Palindrome Partitioning