指令(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还惠，表達式的值為真時饲握，當前元素/組件及所有子節(jié)點將被渲染，為假時被移除蚕键。
注意：如果一次判斷的是多個元素救欧，可以再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結構會看到元素上加載了內聯(lián)樣式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屬性切換，使用于頻繁切換條件搂漠。
小禮物走一走诈火，來簡書關注我
