【Vue学习笔记_06】v-if/v-show条件判断

配套可执行代码示例 => GitHub

v-if指令

当v-if绑定的条件满足，即boolean值为true时才渲染该元素及其子元素。

<div id="app">
  <h2 v-if="isShow">{{msg}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello',
      isShow: true
    }
  })
</script>

v-else指令

与v-if搭配使用，当v-if绑定的条件不满足，接下来最近的一个带有v-else指令的元素被渲染。

<h2 v-if="isShow">{{msg}}</h2>
<h2 v-else>isShow为false</h2>

v-else-if指令

同理，与v-if、v-else搭配使用。

<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>

注：虽然可以实现功能，但不建议这么写，比较复杂的逻辑可以使用计算属性实现。

计算属性的详细介绍可以看这篇笔记：【Vue学习笔记_04】computed计算属性

案例-用户登录切换

应用：登录界面，用户需要切换登录方式，账号登录或邮箱登录。这里就可以借助v-if和v-else判断，绑定一个boolean变量，动态决定渲染哪一部分。

引出一个小问题：如果用户先选中账号登录，输了一半换邮箱登录，再切换回账号登录时，之前输入的内容不会清空。

• 原因：Vue在标签渲染到浏览器之前，先放到内存的虚拟DOM里，在进行真实DOM渲染时，出于性能考虑，会尽可能地复用已经存在的原因，而不是创建新的元素。
• 解决：使用key属性作为是否可以复用的标识，key不同的元素不能复用。

<div id="app">
  <span v-if="isUser">
    <label for="username">账号：</label>
    <input type="text" id="username" placeholder="请输入账号" key="username">
  </span>
  <span v-else>
    <label for="email">邮箱：</label>
    <input type="text" id="email" placeholder="请输入邮箱" key="email">
  </span>
  <button @click="isUser=!isUser">切换</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>

v-show指令

v-if和v-show都决定一个元素是否渲染，区别在于当条件为false时：

• v-if：元素在DOM中不存在
• v-show：给元素添加一个行内样式display: none;

因此，当需要在显示和隐藏之间频繁切换时，使用v-show；当只有一次切换时，通常使用v-if。