Vue(v-if、v-show的使用)

1、v-if 和v-show 只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态

2、v-if 是通过实时的创建或移除元素，从而达到元素的显示和隐藏

3、v-show 是通过为元素添加或移除 display: none来实现隐藏和显示

4、如果元素需要频繁的切换显示和隐藏，使用v-show更合适。如果元素被创建出来之后，可能不会进行状态的切换，使用v-if更合适

5、v-show有更高的初始渲染消耗，而v-if有更高的切换消耗

<div id="app">
	{{flag}}
	--------------------------------------
	<input type="button" value="toggle" @click="flag = !flag" />
	<h3 v-if="flag">这是一个大大的h3</h3>
	<h6 v-show="flag">这是一个小小的h6</h6>
	
	<!-- v-if 和v-show 只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态 -->
	<!-- v-if 是通过实时的创建或移除元素，从而达到元素的显示和隐藏 -->
	<!-- v-show 是通过为元素添加或移除 display: none来实现隐藏和显示 -->
	<!-- 如果元素需要频繁的切换显示和隐藏，使用v-show更合适。如果元素被创建出来之后，可能不会进行状态的切换，使用v-if更合适 -->
	<!-- v-show有更高的初始渲染消耗，而v-if有更高的切换消耗 -->
</div>

var vm = new Vue({
	el: '#app',
	data: {
		flag: true
	},
	methods: {}
})