Vue 條件判斷 v-if和v-else

條件判斷

v-if和v-else

<div id="app">
  <div v-if="score>=90">優秀</div>
  <div v-else-if="score>=80">良好</div>
  <div v-else-if="score>=60">及格</div>
  <div v-else>不及格</div>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 90
    }
  })
</script>

v-if的原理

• v-if后面的條件為false時，對應的元素以及其子元素不會渲染。
• 也就是根本沒有不會有對應的標簽出現在DOM中。

v-show

v-show的用法和v-if非常相似，也用於決定一個元素是否渲染

<div id="app">
  <h2 v-show="isShow">天氣不錯!</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isShow: true
    }
  })
</script>

v-if和v-show對比

• v-if當條件為false時，壓根不會有對應的元素在DOM中。
• v-show當條件為false時，僅僅是將元素的display屬性設置為none而已。
• 當需要在顯示與隱藏之間切片很頻繁時，使用v-show
• 當只有一次切換時，通過使用v-if