Vue 条件渲染

v-if 指令的使用

在Vue中，v-if 指令可以用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

示例：

我们来看下面这段代码，有姓名和年龄这两条信息，现要求只显示姓名，而隐藏年龄：

    

        
显示姓名：小飞侠
        
隐藏年龄：28
    
    

在浏览器中预览：

我们可以清楚的看到在浏览器中关于年龄的信息被成功隐藏，这是因为我们分别在两条信息上使用 v-if 指令绑定了两个属性，属性 show 的值为 true，属性 hide 的值为 false 。内容只有当 v-if 指令的表达式返回真值的时候才会被渲染，所以第二条信息被成功隐藏。

v-else指令

v-if 指令就类似 JavaScript 中的 if 语句，而 if 语句有与之匹配的else语句，v-if 指令也有与之匹配的 v-else 指令。

示例：

例如下面这段代码中：

    
显示
    
隐藏

v-if 指令的表达式值为真，所以内容会被渲染，而与之对应的 v-else 指令中的内容则不会被渲染。反之如果v-if指令表达式值为假，则会渲染v-else指令中的内容。

注意 v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if指令

v-else-if 指令是在2.1.0 新增的一个指令，相当于 JavaScript 中的 else-if 语句，可以同时使用多个 v-else-if指令。

    

        
我是Mark
        
我是Tom
        
我是xkd
        
猜猜我是谁？
    
    

在浏览器中预览，可以看到页面中会显示 “我是xkd”，因为我们在 data 函数中，给 name 属性赋值为 ’xkd‘，所以只有满足此条件的语句才会显示相应内容。

需要注意的是，v-else-if 指令必须在 v-if 指令之后，v-else 指令之前。

v-show指令

还有一个指令也可以根据条件展示元素的选项，也就是 v-show 指令。

示例：

    

        
侠课岛欢迎你！
    
    

上述代码在浏览器页面中会显示“侠课岛欢迎你！”，使用 v-show 指令，不管 data 函数中的show 属性值为 true 或者 false，都会渲染

标签中的内容，区别在于当值为 false 时，标签中 display 属性值为 none，即隐藏。

虽然 v-if 指令和 v-show 指令都是通过条件来渲染元素内容，但是它们还是有区别的。

• v-if 是惰性的，如果 v-if 的表达式结果不是true的话，对应的元素是不会被渲染出来的，一直到表达式的结果第一次为 true 的时候，才会去渲染。
• v-show 不管表达式的结果如何，都会渲染出来，表达式的结果只是用来判断是否通过css来切换元素的隐藏和显示。
• 一般来说v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因为如果在运行时条件不太可能改变则使用 v-if 较好。如果需要非常频繁地切换，则使用 v-show 较好。