Vue.jsのv-if,v-show 要素の表示非表示

要素の表示非表示を切り替える

js

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

html

<div id='app'>
  <p v-if=toggle>
  Hello
  </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16"></script>

表示結果

jsのtoggleをfalseにすると非表示になる。

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

v-showでfalseの場合はcssでdisplay:noneとなる。
v-ifの場合はdomレベルで削除となる。