vue 条件渲染

vue 中给某个dom元素一个key值，当它准备复用该dom时，若key值不一样，便不会去复用。

 

在需要频繁显示隐藏 dom 时，使用v-show性能要高一些。

命令： v-if 该值，决定了其所在的div是否真实地被挂载到页面之上。

	<div v-if="show">{{message}}</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				show: false,
				message: "hello world"
			}
		})
	</script>

 

命令：v-show 该值，决定了display 是none 还是非none。不管是否显示，其所在dom都被渲染到页面之上。

	<div id="app">
		<div v-if="show">{{message}}</div>
		<div v-show="show">{{message}}</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				show: false,
				message: "hello world"
			}
		})
	</script>

 

if 与 else 一起使用：（要紧贴一起使用）

		<div v-if="show">{{message}}</div>
		<div v-else>Bye world</div>

多个else语句：

	<div id="app">
		<div v-if="show === 'a'">{{message}}</div>
		<div v-else-if="show === 'b'">this is b</div>
		<div v-else>Bye world</div>
		<!-- <div v-show="show">{{message}}</div> -->
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				show: 'b',
				message: "hello world"
			}
		})
	</script>