指令(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>上使用

3.v-if和v-show的不同

v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。