Vue系列之条件渲染（五）

 

前言

      之前介绍了v-bind 和 v-on 指令，今儿来介绍一下vue的条件渲染。一般的页面开发中会依据不同的判断条件来控制dom是否显示在页面上，以及dom元素是否存在。本章节就重点介绍 v-if 和 v-show 指令。

 

正文

1. v-if

       v-if 指令用于动态的渲染一部分内容，通过js语句返回为true时dom元素被渲染；反之，不存在。，举个栗子：

<div v-if="true"> 看到我啦 </div>
<div v-if="false"> 我消失啦 </div>

       大家知道 if 和 else 是一对难兄难弟，既然有了 v-if 指令哪里又少的了 v-else 呢~ 毕竟升级打怪的路上是多么的不容易，咳咳，言归正传！！v-else 表示不论 v-if 的最终结果是什么，它都将显示它的另一面。啃个栗子：

<div v-if="seen"> 看到啦 </div>
<div v-else> 没看到 </div>

       在上例中，当seen为true时，显示 看到啦；当seen为false时，显示 没看到。因为v-if和v-else为指令，所以它们必须添加在元素上，上面的两个例子都是加在单个元素上，还可以加在 <template>上。

<template v-if="show">
  <div v-if="seen"> 看到啦 </div>
  <div v-else> 没看到 </div>
</template>

       贴心的vue还为我们提供了 v-else-if，想必大家都猜到了，它是用来实现 v-if 的 else-if 的功能。

<div v-if="A"> AAA </div>
<div v-else-if="B"> B </div>
<div v-else> C </div>

注意：v-else 和 v-else-if 指令必须紧跟在 v-if 或者 v-else-if 的指令后面，不然不会被识别。

2. v-show

      v-show 也是渲染元素的一种方式，它与 v-if 的不同之处在于：v-if是仅有在条件为true的时候，才会渲染dom, 而 v-show 不论结果如何，都会渲染dom, 并依据结果显示或隐藏。
       在频繁对dom的显隐进行操作的时候，推荐使用 v-show，这样的成本开销最小，性能会更佳。

 

 

                                                                     觉得本文对你有帮助？请分享给更多人

                                                             关注「前端怪咖」，加入我们，一起提升前端技能