Vue中的条件渲染

<div id="app">
        <div v-if="show">{{message}}</div>
        <div v-else>Bye world</div>
      //通过v-if指令结合一个js表达式（show）的返回值来决定一个标签是否在页面上存在
      //v-else需要和v-if贴在一起使用
        <div v-show="show">{{message}}</div>
        //对应的表达式show的值是false，它在页面上依然存在，但是是display:none的形             //式保存在页面上的
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			show: false,
			message:"hello world"
		}
	})
</script>

v-if和v-show都能控制标签是否在页面上显示 二者的区别： v-if是控制一个标签是否在网页上存在 v-show是控制一个标签是否在页面上显示

v-if和v-else指令的用法示例：

<div id="app">
	<div v-if="show==='a'">
		This is A
	</div>
	<div v-else-if="show==='b'">
		This is B
	</div>
	<div v-else="show==='c'">
		This is C
	</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			show: 'a'
		}
	})
</script>