v-if、v-else和v-else-if这几个指令用于条件渲染，让我们可以按照条件在页面上显示和隐藏某些元素。注意v-else-if指令是Vue 2.1新增的。类似的指令还有v-show，不过v-show指令仅仅改变元素的CSS display属性，也是说隐藏的元素还是存在于页面上，仅仅是不显示而已。而v-if等元素会真正创建和销毁元素。
这些指令的使用方法很简单，直接看例子就行了。
<h1>条件渲染</h1>
<div id="s4">
<h3>v-if渲染会实际创建和销毁对象</h3>
<p>分数是:<input type="text" v-model="mark"/></p>
<p v-if="mark < 60">不及格</p>
<p v-else-if="mark <80">及格</p>
<p v-else="">优秀</p>
<h3>v-show仅仅调用CSS display属性</h3>
<button @click="toggleShow">改变show状态</button>
<p v-show="show">可以看到我</p>
</div>
<script>
let vm4 = new Vue({
el: '#s4',
data: {
mark: 80,
show: true
},
methods: {
toggleShow: function () {
this.show = !this.show
}
}
})
</script>
