14 条件渲染
顾名思义，就是符合哪些条件，就渲染哪些东西，其实就是几个指令的使用
先做一个小例子
我想让这个div时而显示，时而隐藏，可以在两者之间进行切换，那么使用原生的方式实现，想到的是用display控制。在vue中不用亲自的写这个属性，它提供了一个执行:v-show
14.1 v-show
v-show是vue给我们提供的指令，控制元素是否展示，值通常为布尔值(也可以写表达式)，为false的时候隐藏，为true的时候显示，默认为true
v-show不仅仅可以写布尔值，也可以写表达式，根据表达式的结果判断是true还是false
上面两个都是false，所以也一定不会显示
v-show的底层实现其实是调整的是display的属性
说到v-show就不得不说下v-if了
14.2 v-if
我们把v-show换成v-if，发现元素也没了，而且没得很彻底，不止是被隐藏了，根本就找不到了
如果确定了这个元素不想显示，那么可以使用v-if
元素直接没了
当然v-if也可以支持表达式
14.3 v-show和v-if整合小案例
如果v-show和v-if都已经掌握了，就可以做一个交互的小案例了
这个案例内容为：定义一个初始化为0的属性n，通过按钮每次自增1，n=1的时候展示一个div，n=2的时候再展示一个div
v-show实现
首先使用v-show实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 使用v-show做条件渲染 --> <!-- <div id="root" v-show='true'> 你好,{{name}}</div> <div id="root" v-show='1==2'> 你好,{{name}}</div> --> <!-- 使用if做条件渲染 --> <!-- <div id="root" v-if='1==1'> 你好,{{name}}</div> --> <!-- v-if和v-show交互使用小案例 --> <div id="root"> <h2>当前的n的值是{{n}}</h2> <button @click="n++">点我n+1</button> <div v-show="n === 1">vue</div> <div v-show="n === 2">html</div> <div v-show="n === 3">java</div> </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ name:'vue', n:0 } }) </script> </html>
效果是完全符合的
v-if实现
然后使用v-if实现
也是可以实现的
那么既然v-show和v-if都可以是实现，那么用哪个呢？
如果元素有着很高的切换频率，那么建议使用v-show,因为v-show只是控制display的属性，元素节点还在，但是如果v-if切换频率很高，元素节点一直在消失，不断在dom里面添加删除一个节点，存在一定的效率问题，所以切换频率低的建议使用v-if,频率高的建议使用v-show
14.4 v-else-if
不仅有v-if，还有v-else-if,写法和js的写法逻辑是一样的，如果第一个表达式成立，就不会判断后面的表达式了，它的效率比v-if高，如果有多个判断，建议使用它
14.5 v-else
既然都有v-if和v-else-if,怎么少的了v-else呢，当没有表达式满足的时候，会执行它，一般v-else里面不会写表达式，因为写也不会去执行判断
值得注意的是：当我们配合使用这些判断的时候，不允许被打断，如果中间有其他元素，则会打断整体结构的运行
14.6 小技巧
如果我们使用v-show或者v-if判断的时候，有多个相同的条件，那么我们需要写多次相同的判断
这样虽然可以实现功能，但是代码有些冗余
技巧1(不推荐)
这种情况下，我们可以给这些元素一个父元素，条件在父容器里面写
这样写虽然可以实现，但是有个小小的美中不足，就是破坏了结构，本来只有三个H2元素，现在为了实现功能却要加一个div
技巧2(推荐)
我们不用div，使用template(模板)，它最大的特点就是不影响结构，值得注意的是：template只能配合v-if使用，不能配合v-show使用
上面说了，只能配合v-if使用，换成v-show是不行了，我们也来验证下
n还不等于1就显示出来了，明显不行
相关代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 使用v-show做条件渲染 --> <!-- <div id="root" v-show='true'> 你好,{{name}}</div> <div id="root" v-show='1==2'> 你好,{{name}}</div> --> <!-- 使用if做条件渲染 --> <!-- <div id="root" v-if='1==1'> 你好,{{name}}</div> --> <!-- v-if和v-show交互使用小案例 --> <div id="root"> <!-- v-else和v-else-if配合使用 不允许被打断 --> <h2>当前的n的值是{{n}}</h2> <button @click="n++">点我n+1</button> <!-- <div v-if="n === 1">vue</div> <div>！！！</div> <div v-else-if="n === 2">html</div> <div v-else-if="n === 3">java</div> <div v-else>mysql</div> --> <!-- template只能配合v-if使用 配合v-show是不行的 --> <template v-if='n===1'> <h2>北京</h2> <h2>青岛</h2> <h2>深圳</h2> </template> </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ name:'vue', n:0 } }) </script> </html>
14.7 总结
条件渲染
- 1 v-if
- 写法：
- (1) v-if="表达式"
- (2) v-else-if="表达式"
- (3) v-else="表达式"
- 适用于：切换频率比较低的场景
- 特点：不展示dom元素直接移除
- 注意：v-if可以和v-else-if,v-else一起使用，但是要求结构不能打断
- 2 v-show
- 写法：v-show="表达式"
- 适用于：切换频率较高的场景
- 注意：不展示dom元素不会被移，仅仅是控制display的属性进行显示或者隐藏
- 3 备注
- 使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
