站点图标 GIS开发者

理解条件渲染 | 重学Vue3

这个月开始重新开始学习Vue3,从理解基本使用到模拟实现!

本文是关于Vue的条件渲染指令:v-ifv-show

看文本篇,你将会对条件渲染有个清晰的认识

本文目录结构如下:

image.png

v-if

此处分3小点来讲:

image.png

1. 用于根据条件渲染一块内容

其实就是渲染真实元素,是否渲染,由后面表达式的值决定

2. 当指令的表达式返回 truthy 值的时候被渲染

即表达式返回的值的布尔值为真就会被渲染,如下:



运行结果

image.png

如果返回的布尔值为假呢,如下

isOK:false

它根本就不会渲染该元素

3. 我们还可以在元素上使用 v-if ,表示渲染一组元素

例如同时渲染以下三个p元素



结果如下

image.png

可以看到三个元素真的被一起渲染了

v-else

此处分2小点来讲:

image.png

1. 表示 v-if 的“else 块”

比如非管理员登录系统时,显示else模块



结果如下

image.png

可以看到值显示else模块了

2. 注意:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别

例如单独使用v-else的结果就是,该指令没啥作用,就跟没有这个属性一样

v-else-if

此处分2小点来讲:

image.png

1. 充当 v-if 的“else-if 块”

如下非admin,而是HR登录系统时



结果如下

image.png

2. 可以连续使用
如下,新增BOSS权限



结果如下

image.png

可以看到确实可以连续使用v-else-if

v-show

此处分4小点来讲:

image.png

1. 与v-if相似,也是用于根据条件展示元素

比如我将v-if改成v-show



结果如下

image.png

可以看到跟v-if结果一样

2. 不同的是 v-show 的元素始终会被渲染并保留在 DOM 中

比如我将上述例子的role的值清空,结果如下

image.png

可以看到不管返回的布尔值是真还是假,元素都会渲染到HTML结构中,当为假时,只是不展示而已,即displaynone

3. 本质只是切换display的值

这点上面已经证实

4. 注意,v-show 不支持 元素,也不支持 v-else

v-if 和v-show的区别

此处小结3小点来讲:

1. v-if 是“真正”的条件渲染;而v-show元素总是会被渲染,之后只是简单地切换display的值

2. v-if 也是惰性的,如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块

3. v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销,因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好

END~

以上就是关于条件渲染的所有内容

如有问题,欢迎留言告知,感谢~

为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,可移步下载:https://github.com/jCodeLife/mind-map

退出移动版