3.1.2　条件指令

除了基本指令外，Vue内置指令还包含条件指令。和JavaScript的条件语句一样，Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件。常用的Vue条件指令有v-if、v-else、v-else-if。下面对它们及v-show进行详解。

1．v-if

v-if：条件渲染指令，动态地在DOM内添加或删除DOM元素。

主要用法：根据表达式值的真假判断是否渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。如果元素是<template>，将提出它的内容作为条件块。

代码如下：

运行效果如图3-10所示。

图3-10　v-if运行效果图

2．v-else

v-else：条件渲染指令，必须与v-if成对使用。

主要用法：v-else元素必须紧跟在v-if或者v-else-if的后面，否则它将不会被识别。

代码如下：

运行效果如图3-11所示。

图3-11　v-else运行效果图

3．v-else-if

v-else-if：判断多层条件，必须跟v-if成对使用。

主要用法：表示v-if的“else if”块，可以链式调用。前一兄弟元素必须有v-if或v-else-if。代码如下：

运行效果如图3-12所示。

图3-12　v-else-if运行效果图

4．v-show

v-show：条件渲染指令，为DOM设置CSS的Style属性。

主要用法：根据表达式的真假值，切换元素的CSS属性display。当条件变化时，该指令触发过渡效果。

提示：带有v-show的元素始终会被渲染并保留在DOM中。

代码如下：

    <!DOCTYPE html>
    <html>
       <head>
         <meta charset="utf-8">
         <title>v-show练习</title>
       </head>
     <body>
         <h3 v-show="ok">Hello Vue!</h3>
    </body>
    </html>

运行效果如图3-13所示。

图3-13　v-show运行效果图

v-show的用法与v-if基本一致，只不过是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display:none。v-if和v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真时才开始编译。

上一章目录下一章