条件渲染，是指我们可以通过判断条件，来控制某一个节点是否渲染。
Vue 中提供了三个指令来实现条件渲染：

  • v-if
  • v-else

  • v-else-if

    一、基础语法

    Vue 中条件渲染和原生 JS 中的条件判断语句类似，都需要提供一个布尔值作为判断条件。
    区别在于 Vue 的条件渲染指令是直接设置在 HTML 标签身上，指令条件的 true 或 false，决定了当前节点是否渲染。
    基础语法如下：

    1. <div v-if="布尔值"></div>
    2. <div v-else-if="布尔值"></div>
    3. <div v-else></div>

    代码运行流程说明：

  • v-if 值为 true，元素渲染，值为 false，元素不渲染。

  • 当 v-if 的值为 true 时，同级如果还有 v-else-if 或 v-else，都不再执行；
  • v-else-if 在 v-if值为 false 的前提下，值为 true，元素渲染，值为 false，元素不渲染；
  • 当 v-else 前面同级的条件值都为 false 时，元素才渲染；

示例代码：

  1. <h2 v-if="false">看不见我...</h2>
  2. <h2 v-else-if="false">也看不见我...</h2>
  3. <h2 v-else>看得见我...</h2>

1、注意事项

使用条件渲染指令还需要注意以下几点：

  1. v-if 和 v-else-if 的值可以是固定的布尔值，也可以是 data 中的一个动态数据；
  2. v-if 和 v-else-if 的值如果不是布尔值，在解析时会自动转换为布尔值进行判断；
  3. 三个指令不需要同时使用，可以根据需求任意组合，但是使用后两个指令时都必须要有 v-if;

  4. 后两个指令和 v-if 搭配使用时，所在的节点必须是同级关系；

    1. <div id="app">
    2.  <!-- data 数据作为动态条件 -->
    3.  <h2 v-if="isRender">看不见我...</h2>
    4.  <!-- 数字 0 作为条件 -->
    5.  <h2 v-else-if="0">也看不见我...</h2>
    6.  <h2 v-else>看得见我...</h2>
    7. </div>
    8. <script>
    9.  new Vue({
    10.      el: '#app',
    11.      data() {
    12.          return {
    13.              isRender: false
    14.          }
    15.      }
    16.  })
    17. </script>

    二、v-if 和 v-show

    Vue 中的 v-if 和 v-show 都可以用来控制页面中元素的显示和隐藏。区别在于：

  5. v-if 隐藏元素时，元素不会在节点树中渲染出来；

  6. v-show 隐藏元素时，元素会在节点树中渲染出来，只是多了一个 display: none 的样式；

条件渲染 - 图1

1、应用场景

v-if 和 v-show 都可以用来控制元素的显示或隐藏，那我们到底什么时候使用 v-if，什么时候使用 v-show 呢？

  • v-if 在切换元素的显示和隐藏时，需要将元素添加到节点树中，然后又从节点树中删掉；
  • v-show 在切换元素的显示和隐藏时，节点一直存在，只需要添加和取消 display: none 样式就行；

从性能上来看，样式切换消耗的性能，肯定比节点切换消耗的性能要低得多。
因此，关于 v-if 和 v-show 的应用场景，我们的结论除了以下几种情况使用 v-show 以外，其他情况都是用 v-if：

  1. 节点需要频繁的进行显示和隐藏的切换；
  2. 节点在切换成隐藏后，需要保留节点的状态（例如输入框里的值、复选框的选中等）；

附加说明：最好是我们自己理解到 v-if 和 v-show 的区别，在不同的应用场景中根据具体情况具体分析。