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