v-if 指令的使用
在Vue中，v-if 指令可以用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
示例：
我们来看下面这段代码，有姓名和年龄这两条信息，现要求只显示姓名，而隐藏年龄：
<body>
<div id="app">
<p v-if="show">显示姓名：小飞侠</p>
<p v-if="hide">隐藏年龄：28</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
show:true,
hide:false
}
}
})
</script>
</body>在浏览器中预览：
我们可以清楚的看到在浏览器中关于年龄的信息被成功隐藏，这是因为我们分别在两条信息上使用 v-if 指令绑定了两个属性，属性 show 的值为 true，属性 hide 的值为 false 。内容只有当 v-if 指令的表达式返回真值的时候才会被渲染，所以第二条信息被成功隐藏。
v-else指令
v-if 指令就类似 JavaScript 中的 if 语句，而 if 语句有与之匹配的else语句，v-if 指令也有与之匹配的 v-else 指令。
示例：
例如下面这段代码中：
<div id="app">
<p v-if="3>1">显示</p>
<p v-else>隐藏</p>
</div>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 指令。
<body>
<div id="app">
<p v-if="name=='Mark'">我是Mark</p>
<p v-else-if="name=='Tom'">我是Tom</p>
<p v-else-if="name=='xkd'">我是xkd</p>
<p v-else>猜猜我是谁？</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
name:'xkd'
}
}
})
</script>
</body>在浏览器中预览，可以看到页面中会显示 “我是xkd”，因为我们在 data 函数中，给 name 属性赋值为 ’xkd‘，所以只有满足此条件的语句才会显示相应内容。
需要注意的是，v-else-if 指令必须在 v-if 指令之后，v-else 指令之前。
v-show指令
还有一个指令也可以根据条件展示元素的选项，也就是 v-show 指令。
示例：
<body>
<div id="app">
<h1 v-show="show">侠课岛欢迎你！</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
show:true
}
}
})
</script>
</body>上述代码在浏览器页面中会显示“侠课岛欢迎你！”，使用 v-show 指令，不管 data 函数中的show 属性值为 true 或者 false，都会渲染 <h1> 标签中的内容，区别在于当值为 false 时，标签中 display 属性值为 none，即隐藏。
虽然 v-if 指令和 v-show 指令都是通过条件来渲染元素内容，但是它们还是有区别的。
v-if是惰性的，如果v-if的表达式结果不是true的话，对应的元素是不会被渲染出来的，一直到表达式的结果第一次为true的时候，才会去渲染。v-show不管表达式的结果如何，都会渲染出来，表达式的结果只是用来判断是否通过css来切换元素的隐藏和显示。- 一般来说v-if 有更高的切换开销，而
v-show有更高的初始渲染开销。因为如果在运行时条件不太可能改变则使用v-if较好。如果需要非常频繁地切换，则使用v-show较好。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。