Vue 条件渲染

v-if v-else 的用法

v-if 和 v-show 的区别

v-if 和 v-show 的使用场景

<template>
	<div>
		<p v-if="type === 'a'">A</p>
		<p v-else-if="type === 'b'">B</p>
		<p v-else>C</p>


		<p v-show="type === 'a'">A by v-show</p>
		<p v-show="type === 'b'">B by v-show</p>
	</div>
</template>
<script>
export default{
	data(){
		return{
			type: 'a'
		}	
	}
}
</script>

结果清晰可见，false的v-if v-else不会在DOM上面出现，而false的v-show会在DOM上面出现，只是设置了隐藏。

使用场景
当更新不频繁时，使用v-if-esle
当更新频繁时，使用v-show