3-6 Vue中的条件渲染

Posted 2021-02-14 ytraister

本次案例讲解：v-if，v-show，v-else，v-else-if和key值的相关用法！！！

v-if指令：

//通过一个（v-if）指令 ，可以结合js表达式的返回值，决定一个标签是否在页面上展示或决定一个标签是否在页面上存在

//显示效果如下：　　v-if指令并不会显示div标签　　（为了显示效果明显，特意在此页面中给div的父级设置了粉色背景颜色，便于看出页面的改变）

 //可以看到，调用v-if，设置为false后，div并不会显示出来。

//当在控制台中，改变v-if的值为true后，div就显示出来了。如下图：

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

 

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

v-show指令：

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

//v-show在页面中的显示效果如下：　　（v-show会把div的display属性显示为none的效果）

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

//综上，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需要连着用才行

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

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

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

v-else-if指令：

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

//因为show的值设置为true，所以v-if指令会显示（This is A），如下图：

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

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

key值：

编写新的Demo，代码如下：

//运行代码效果如下：

 

 

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

//添加key值，代码如下：

//运行代码后，效果如下：

 

 

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