基礎からメモ： Vue.js CH1-p41 条件分岐

Vue.js

表示内容をテンプレートベースで分岐させるには、v-ifディレクティブを使う。

[index05.html]

  <div id="app">
    <p v-if="show">Hello Vue.js!</p>
  </div>

[main05.js]

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

app.showの初期値はtrueなので画面に Hello Vue.js! と表示される。コンソールからapp.show = falseと入力すれば表示が消える（DOMから取り除かれる）。

  • 表示内容を分岐させるには、v-ifディレクティブを使う。