![Vue.js企业开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/909/44509909/b_44509909.jpg)
2.2 条件渲染
2.2.1 v-show
v-show指令可以根据条件展示元素,代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P32_26326.jpg?sign=1739282086-aKuUIs57p6sbutDEE0Jrrr23qG0Omg9G-0-6e791665f3e59bdab5b66069bb397d9b)
带有v-show的元素始终会被渲染并保留在DOM中,v-show只是通过简单地切换元素CSS属性display:none实现的。例如,将上面的代码v-show的值设置为false,代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P32_26327.jpg?sign=1739282086-J5owgigC2k0X2BqsROByKuyAVESu2NnO-0-19c3d8b445353f7c9e7dee9354ec3a03)
在浏览器中运行的效果如图2.6所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P32_24500.jpg?sign=1739282086-7E92ptFLWvH9kjDnRkwJPOa9yO77eSBS-0-a6322ef94124e7d0f54a938d67f92c35)
图2.6 v-show在浏览器中运行的效果
2.2.2 v-if与v-else-if
v-if和v-show都可以实现条件渲染,但是v-if与v-show不同的是,v-if不是通过切换CSS属性实现显示与隐藏的,当v-if的值为false时,带有v-if的DOM元素就不会被渲染出来。v-if和v-show最大的不同就是,v-if不仅可以单独使用,还可以和v-else-if、v-else指令配合使用,类似于JavaScript中的if-else、if-else-if语句。
1.v-if
v-if用于条件性地渲染一部分内容。这部分内容只会在指令的表达式返回值为true的时候才被渲染。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P33_26330.jpg?sign=1739282086-BosQ7FpPQ9tqnS90wPemMlkUMUVKAGhP-0-5feab1d60d1e84ff35044c2ab87220d2)
在浏览器中运行的效果如图2.7所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P33_4391.jpg?sign=1739282086-rVto0kbxqZv7SwPwjdzVZzvER2KGSGlt-0-6a1b684d87119ef7d606051d79b194f8)
图2.7 v-if在浏览器中运行的效果
2.v-else-if
v-else-if指令类似于条件语句中的“else-if块”,可以与v-if配合使用。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P34_26332.jpg?sign=1739282086-kLDajJz8zdn4nH82hVVmBOFlHiO8F0JJ-0-e289708881288782f01797280be0b527)
上面代码在浏览器中运行的结果为B,这里需要注意的是,v-else-if指令不能单独使用,必须跟在带有v-if或v-else-if的元素之后。
3.v-if和v-show的区别
v-if与v-show指令都可以根据表达式的值来控制元素的显示与隐藏状态。
v-if相比于v-show,更“真实”地实现了元素的渲染与移除,但是在频繁的切换过程中,使DOM元素不断地在内存中重建与销毁,这样便增加了内存的开销。
v-show是更简单的一种切换显示与隐藏状态的操作,只是修改了CSS属性中display的值,无论显示与隐藏,DOM元素始终被渲染。
综上所述,如果需要在页面中频繁地切换某个元素的显示状态,推荐使用v-show指令;如果在运行时条件很少改变,则推荐使用v-if指令。
2.2.3 v-else
在根据条件渲染DOM元素时,还可以使用v-else指令来表示“else块”,类似于JavaScript中的if-else逻辑语句。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P34_26335.jpg?sign=1739282086-RVoktu7LScsxK8to0gzP2aXhBYL6dx3P-0-91349049c938565a7c0a60d3f514d17b)
在浏览器中运行的效果如图2.8所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P35_4550.jpg?sign=1739282086-rQv4YKu8f2bV05Bswi1oIa1ureEH7zvT-0-ac982baf3c1a518bbd52f371ce4f3d2f)
图2.8 v-else指令在浏览器中运行的效果
2.2.4 在<template>元素上使用v-if条件渲染分组
因为v-if是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素应该如何操作呢?此时可以把一个<template>元素当作不可见的包裹元素,并在上面使用v-if。最终的渲染结果将不包含<template>元素。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P35_26336.jpg?sign=1739282086-YXQLOkdGXdfdNoqMIleKEIvwBW4jhSU5-0-71386b692156117bd5a9bacea18d8bbc)
在浏览器中运行的效果如图2.9所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P36_4663.jpg?sign=1739282086-2ASjJoQmQvCoQSGP64tIxt4RR31OsprB-0-788dd8b8c325cab2ab2db031f979636a)
图2.9 在<template>元素上使用v-if条件运行的效果
2.2.5 用key管理可复用的元素
Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这样做除了使Vue的执行速度变得非常快之外,还有其他一些作用。例如,允许用户在不同的登录方式之间切换。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P36_26337.jpg?sign=1739282086-xtIXiv31xws5lU0aiOefooSeAAJiOoiO-0-666df4256405b07e27fd5387fc931b94)
在浏览器中运行,首先在输入框中输入“张三”,如图2.10所示,然后单击“切换”按钮,可以看到邮箱中显示的是“张三”,如图2.11所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P37_4782.jpg?sign=1739282086-3TbP06PF13TquRW4TGxoJNBMVR7KPcOz-0-11d7d8b4ff7fe59db636bdd94328e9e0)
图2.10 输入“张三”
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P37_4785.jpg?sign=1739282086-7TSekTCZ0icXGimIVyUuZ8SKrD66P8M7-0-b97057613c174fdc431b1b2dae5bf36c)
图2.11 切换效果
在上面的示例中,切换状态并不会清空用户已经输入的内容,因为两个模板使用了相同的元素,<input>不会被替换掉,只是替换了它的placeholder属性。
这样也不总是符合实际需求,所以Vue提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的key属性。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P37_26340.jpg?sign=1739282086-jR3pXvLskUy5Bhk5DC8tX3iT80hRsyqe-0-15b21f8ab62b9bff9b9e3119f49b6800)
在浏览器中运行,首先在输入框中输入“张三”,如图2.12所示,然后单击“切换”按钮,可以看到邮箱中的值为默认的placeholder属性的值,如图2.13所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P38_26354.jpg?sign=1739282086-l4IrL3LC2OT3pR43tAm8bXcWRAEQeEyK-0-91c017ce907e088cbaf2c9813f018277)
图2.12 输入“张三”
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P38_26357.jpg?sign=1739282086-xybaJWTJNgYHRyPAoEmBPUMUr6gVq37j-0-322c498de671d77039ee0e698200251c)
图2.13 切换效果