四、Vue 条件语句

文章目录

[一、v-if 指令](#一、v-if 指令)
- （一）基本使用
- （二）性能考虑
[二、v-else 指令](#二、v-else 指令)
- （一）基本搭配
- （二）使用规则
[三、v-else-if 指令](#三、v-else-if 指令)
- （一）新增版本及作用
- （二）使用限制
[四、v-show 指令](#四、v-show 指令)
- （一）基本用法
- [（二）与 v-if 的区别](#（二）与 v-if 的区别)

一、v-if 指令

（一）基本使用

v-if 指令是 Vue.js 中用于条件判断的核心指令之一。它允许我们根据表达式的值（true 或 false）来决定是否将对应的 DOM 元素插入到页面中。

例如，以下代码展示了在普通元素和 template 标签中使用 v-if 指令的情况：

html 复制代码

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

在上述示例中，对于 < p v-if="seen"> 这部分，当 seen 的值为 true 时，< p> 元素及其内部的文本内容会被渲染到页面上；如果 seen 变为 false，则该 < p> 元素会从 DOM 中移除。同样的道理，对于带有 v-if="ok" 的标签，当 ok 为 true 时，内部包含的所有子元素都会被渲染到页面，而当 ok 为 false 时，这些子元素都不会显示在页面中。

这与其他模板语言（比如 Handlebars）中的条件块写法有所不同。在 Handlebars 模板中，条件块可能是这样的形式：

html 复制代码

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

可以看出，Vue.js 的 v-if 指令更加简洁直观地和 DOM 元素结合在了一起，实现了条件渲染的功能。

（二）性能考虑

需要注意的是，v-if 指令是真正的条件渲染，它会根据条件决定元素是否创建或者销毁。也就是说，当条件从 false 变为 true 时，对应的元素及其子元素会重新创建并插入到 DOM 中；反之，从 true 变为 false 时，元素会从 DOM 中移除。所以，在频繁切换显示隐藏状态的场景下，如果元素内部结构比较复杂，可能会带来一定的性能开销，因为涉及到 DOM 节点的频繁创建和销毁操作。

例如，如果有一个包含大量复杂子组件和绑定数据的组件，使用 v-if 频繁切换其显示隐藏，每次切换时这些子组件的生命周期钩子函数都会重新执行，相关的数据绑定和事件监听等操作也会重新进行一遍，这在性能敏感的应用场景中是需要考虑的因素。

二、v-else 指令

（一）基本搭配

v-else 指令通常与 v-if 指令配合使用，用于给 v-if 添加一个 "else" 块，也就是当 v-if 条件不满足时执行的内容。

以下是一个简单的示例，通过随机生成一个数字，根据其与 0.5 的大小关系来展示不同的内容：

html 复制代码

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

在这个例子中，每次页面加载或者重新渲染时，都会生成一个随机数，当这个随机数大于 0.5 时，显示 Sorry；当随机数小于等于 0.5 时，就会显示 Not sorry，通过 v-else 指令实现了一种简单的二选一的条件展示逻辑。

（二）使用规则

需要牢记的是，v-else 指令必须紧跟在 v-if 或者 v-else-if 指令之后使用，否则 Vue.js 将无法正确识别其逻辑关系，会导致渲染出现错误。例如下面这种错误的写法是不被允许的：

html 复制代码

<div id="app">
    <div v-if="someCondition">
      // 内容
    </div>
    <div>
      // 其他内容
    </div>
    <div v-else>
      // 想作为 else 块的内容，但位置不对
    </div>
</div>

一定要保证 v-else 紧跟对应的 v-if 或者 v-else-if 元素，这样 Vue.js 才能按照预期的条件逻辑来进行页面渲染。

三、v-else-if 指令

（一）新增版本及作用

v-else-if 指令是在 Vue.js 2.1.0 版本中新增的，它的作用正如其名，是用作 v-if 的 else-if 块，可以链式地多次使用，方便我们构建更复杂的多条件判断场景。

例如，以下代码展示了根据 type 变量不同的值来展示不同内容的情况：

html 复制代码

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

在这个示例中，Vue.js 会按照顺序依次判断 v-if 和各个 v-else-if 中的条件表达式。首先判断 type === 'A'，如果不满足则继续判断 type === 'B'，以此类推，直到找到满足条件的分支或者执行到最后的 v-else 块（如果前面所有条件都不满足的话）。

（二）使用限制

和 v-else 一样，v-else-if 也必须紧跟在 v-if 或者其他 v-else-if 之后，以确保条件判断逻辑的连贯性和正确性。例如下面这种错误的顺序是不行的：

html 复制代码

<div id="app">
    <div v-if="condition1">
      // 内容 1
    </div>
    <div v-else>
      // 错误地先写了 v-else
    </div>
    <div v-else-if="condition2">
      // 想作为 else-if 块的内容，但顺序错了
    </div>
</div>

遵循正确的顺序使用这些指令，才能让 Vue.js 准确地根据设定的条件来渲染页面内容。

四、v-show 指令

（一）基本用法

除了上述基于 v-if 系列的条件渲染指令外，Vue.js 还提供了 v-show 指令用于根据条件展示元素。例如：

html 复制代码

<h1 v-show="ok">Hello!</h1>

当 ok 的值为 true 时，< h1> 元素会显示在页面上；当 ok 为 false 时，< h1> 元素会隐藏，但它与 v-if 的实现机制有所不同。

（二）与 v-if 的区别

v-show 指令只是简单地通过设置元素的 display 属性（display: none 或者恢复原有显示值）来控制元素的显示和隐藏，无论条件如何，对应的元素在初始渲染时都会被创建并保留在 DOM 中。而不像 v-if 那样会根据条件真正地创建或销毁元素。