3-6 Vue中的条件渲染

本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!!
v-if指令:
3-6 Vue中的条件渲染
//通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展示或决定一个标签是否在页面上存在
//显示效果如下:  v-if指令并不会显示div标签  (为了显示效果明显,特意在此页面中给div的父级设置了粉色背景颜色,便于看出页面的改变)
3-6 Vue中的条件渲染
 //可以看到,调用v-if,设置为false后,div并不会显示出来。
//当在控制台中,改变v-if的值为true后,div就显示出来了。如下图:
3-6 Vue中的条件渲染

//查看html代码,也有显示div标签内容了,如下图:

3-6 Vue中的条件渲染

===========================================================

v-show指令:

3-6 Vue中的条件渲染

//v-show和v-if的代码相似,只要改一下指令就行了。

//v-show在页面中的显示效果如下:  (v-show会把div的display属性显示为none的效果)

3-6 Vue中的条件渲染

//在控制台中设置v-show的值为true后,页面显示效果如下:  (div标签的display属性消失了)

3-6 Vue中的条件渲染

//综上,v-show指令和v-if指令的效果类似,都是让DOM元素显示或消失。但两者也有点区别:v-if设置的DOM元素只有设置的值为true,才会在页面中加载出来;而v-show设置的DOM元素与display有关,不管display属性的值为none还是block,都会直接显示在页面上,驻留在html代码之中,通过改变display的值来改变DOM元素的显示与否。所以v-show的效果会比v-if好,若要显示/隐藏一个DOM元素,选用v-show最佳

===========================================================

v-else指令:

注意:v-else中不需要添加js语法  而且v-if和v-else需要连着用才行
3-6 Vue中的条件渲染

//因为show的值为false,所以v-if指令不会被执行,而会执行v-else指令,如下图:

3-6 Vue中的条件渲染

//当修改了show的值为true后,v-if指令就会触发显示,反之v-else指令就会消失了,如下图:

3-6 Vue中的条件渲染

===========================================================

v-else-if指令:

注意:同样的v-else-if需要和v-if和v-else一起连着用

3-6 Vue中的条件渲染

//因为show的值设置为true,所以v-if指令会显示(This is A),如下图:

3-6 Vue中的条件渲染

//当修改show的值后,v-if指令就没有被显示了,如下图:  (修改show的值为b后,v-else-if指令就会显示出来;修改show的值为c后,v-else指令就会显示出来)

3-6 Vue中的条件渲染

===========================================================

key值:

编写新的Demo,代码如下:

3-6 Vue中的条件渲染

//运行代码效果如下:

3-6 Vue中的条件渲染

//当把true的值设置为true,页面中会把邮箱名更改为用户名,但是表单(input)中的内容却没有清空。因为,Vue在重新渲染页面的时候,会尽量尝试去复用页面上已经存在的DOM。(即:当显示邮箱名的时候,已经有了一个input,当切换修改成用户名的时候,vue会发现以前页面上也有一个input,所以它的机制会尽量帮助我们复用页面上的DOM,它会尝试去复用input,而我们发现input是被复用了,但是input里面的内容却没有自动的清空)。所以为了解决这个效果,需要运用到 “key值”

//添加key值,代码如下:

3-6 Vue中的条件渲染

//运行代码后,效果如下:

3-6 Vue中的条件渲染

//解释:当给某个元素标签一个key值,Vue会知道它是页面上唯一的元素,如果两个的key值不一样,就不会去尝试复用以前的input标签了,这是Vue中虚拟DOM的一个div算法里面用到的内容

3-6 Vue中的条件渲染

上一篇:基于 django 自带的用户认证进行用户认证


下一篇:Robot Operating System (ROS)学习笔记3---键盘控制