Vue.jsの条件分岐について if

Vue.jsの条件分岐について　if

他に言語のifの書き方とほぼ同じ

new Vue({
  el: "#app",
  data: {
    color: "red"
  }
})

<div id="app">
  <p  v-if="color === 'red'">
    stop
  </p>
  <p v-else-if="color === 'yellow'">
    Caution
  </p>
  <p v-else-if="color === 'blue'">
    Go
  </p>
  <p v-else>
    Not anything
  </p>
</div>

--> redと表示

v-showとの違い

v-showは要素のcssのdisplay:noneで表示させないようにする v-ifはDOMレベルで削除する。

v-if

DOMレベルで削除するので切り替えコスト高い。
v-else, v-else-ifが利用できる

v-show

高い初期描画コスト

v-showは表示非表示が多い時に利用すべき。