![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
5.1.2 v-if/v-else-if/v-else
在Vue中使用v-if、v-else-if和v-else指令实现条件判断。
1.v-if指令
v-if指令根据表达式的真假来有条件地渲染元素。
【例5.2】v-if指令(源代码\ch05\5.2.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P71_164928.jpg?sign=1738821728-jR3v5OZqM3Fam0gnYI3DnPVIC4WG8Er6-0-a293f4436c088e7274dcd7119e8ae20e)
在浏览器中运行程序,按F12键打开控制台并切换到“Elements”选项,结果如图5-3所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P71_21248.jpg?sign=1738821728-sjq9bSIhRglBoK6VdEQTudHOgutduXNG-0-db33989a9f484871887ef0d4b7b2f01c)
图5-3 v-if指令
在上面示例中,使用v-if="no"的元素并没有被渲染,使用v-if="ok"的元素正常渲染了。也就是说,当表达式的值为false时,v-if指令不会创建该元素,只有当表达式的值为true时,v-if指令才会真正创建该元素。这与v-show指令不同,v-show指令不管表达式的真假,元素本身都会被创建,显示与否是通过CSS的样式属性display来控制的。
一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if指令较好。
2.v-else-if/v-else指令
v-else-if指令与v-if指令一起使用,用法与JavaScript中的if…else if类似。
下面示例使用v-else-if指令与v-if指令判断学生成绩对应的等级。
【例5.3】v-else-if指令与v-if指令(源代码\ch05\5.9.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P72_164929.jpg?sign=1738821728-esMkGTyM54lLScNyUFzGjiXiHsYEdnOQ-0-45cde09b2f22ba0e761db60968a02213)
在浏览器中运行程序,按F12键打开控制台并切换到“Elements”选项,结果如图5-4所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P72_21723.jpg?sign=1738821728-7e35bcdQ1vaFPbPHmO0qbsH4BrCLUjbg-0-43fce069f3dbabd430b6728eedf0163f)
图5-4 v-else-if指令与v-if指令
在上面示例中,当满足其中一个条件后,程序就不会再往下执行。使用v-else-if和v-else指令时,它们要紧跟在v-if或者v-else-if指令之后。