指令(Directives)是Vue.js模板中最常用的一项功能，它带有前缀v-,它绑定一个表达式，并将一些特性应用到DOM上。
1.v-if、v-else-if、v-else
- v-if举例
<div id = "app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script>
var app = new Vue({
el : '#app',
data:{
status:1
}
})
</script>
v-else-if要紧跟v-if，v-else要紧跟v-else-if或v-if，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被移除。
注意：如果一次判断的是多个元素，可以再Vue.js内置的<template>元素上使用条件指令，最终渲染的结果不会包含该元素，例如：
<div id="app">
<template v-if="status" ===1">
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</template>
</div>
<script>
var app = new Vue({
el : '#app',
data:{
status:1
}
})
</script>
2.v-show
v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display:none；
<div id = "app">
<p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
var app = new Vue({
el : '#app',
data:{
status:2
}
})
</script>
v-show不能再<template>上使用
7
3.v-if和v-show的不同
v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。
小礼物走一走，来简书关注我
