6. 条件判断 v-if/else & v-show

1. v-if、v-else-if、v-else

• v-if、v-else-if、v-else
  • 这三个指令与 JavaScript的条件语句 if、else、else if 类似
  • Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件

<div id="app">
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>
  <h2>{{result}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      score: 70
    },
    computed: {
      result() {
        let showMessage = '';
        if (this.score >= 90) {
          showMessage = '优秀'
        } else if (this.score >= 80) {
          showMessage = '良好'
        } else if (this.score >= 60) {
          showMessage = '及格'
        } else {
          showMessage = '不及格'
        }
        return showMessage;
      }
    }
  })
</script>

v-if 的原理：

• v-if 后面的条件为 false时，对应的元素以及其子元素不会渲染

• 也就是根本没有不会有对应的标签出现在 DOM中。

  2. 条件渲染案例

• 我们来做一个简单的小案例：

  • 用户再登录时，可以切换使用用户账号登录还是邮箱登录
  • 类似如下情景：

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" />
  </span>
  <span v-else>
    <label for="emial">用户邮箱</label>
    <input type="text" id="emial" placeholder="用户邮箱" />
  </span>
  <button type="button" @click="isUser = !isUser">切换类型</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>

• 小问题：
  • 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
  • 但是按道理讲，我们应该切换到另外一个input元素中了。
  • 在另一个input元素中，我们并没有输入内容。
  • 为什么会出现这个问题呢？
• 问题解答：
  • 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
  • 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
• 解决方案：
  • 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
  • 并且我们需要保证key的不同

3. v-show

• v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
• v-if 和 v-show对比
• v-if 和 v-show 都 可以决定一个元素是否渲染，那么开发中我们如何选择呢？
  • v-if当条件为false时，压根不会有对应的元素在DOM中。
  • v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
• 开发中如何选择呢？
  • 当需要在显示与隐藏之间切片很频繁时，使用 v-show
  • 当只有一次切换时，通过使用 v-if

<div id="app">
  <h2 v-if="isShow" id="aa">{{message}}</h2>
  <h2 v-show="isShow" id="bb">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isShow: true
    }
  })
</script>

• 如图。v-show 是将标签 display 属性改为 none，而 v-if 则销毁 结点