Vue起步06-------条件渲染_vue show+条件-CSDN博客

本文链接：https://blog.csdn.net/h1234561234561/article/details/89846816

问题一，我们的知道什么是条件渲染？
更具某一条件来判定是否要渲染某一块内容

问题二，条件是什莫？
v-if/v-show后面的truthy/falsthy

问题三，那两者有什莫不同呢？
v-if
条件渲染：“真正”【Vue中的“就地复用”策略：因为对于一些可复用且无关键字key的元素，Vue在条件渲染时，会选择复用而不是真正的条件渲染，从新开始渲染某个元素，以此来提高性能】的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
惰性渲染：只有当指令后面为truthy时，才会渲染条件块，否则完全不会理会条件块

v-show
条件渲染：不管后面布尔值是否为truthy/falsthy,其都会渲染条件块，只是设置CSS属性display来达到隐藏切换的作用

问题四，v-if会复用哪些元素呢，怎末复用呢？
当发现条件块中存在可复用元素【标签一样】，v-if指令切换时Vue不会从新再次渲染一个新的元素，而是选择可复用元素，渲染部分不同特性和样式
ps：若想要阻止的话，标签内加一个key特性，值需唯一

问题五，那种情况下适合用v-if，那种适合用v-show呢？
当条件块容量巨大【使用<template>标签包裹】，且之后指令后条件很少改变，则建议使用v-if指令【缘由：惰性渲染，初次渲染开销小】；当条件块之后指令后条件频繁改变，则建议使用v-show指令【两者情况都存在内存中，没有真正意义上的条件渲染，所以，若是频繁切换则可以只是修改dispaly属性，依此来提高整个效率】

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
	</head>
	<body>
		<div id="app">
			<!-- 
			没有光标的变化，说明彻底的移除，包括内存里面的，
			每次渲染都是从新开始
			 -->
			<p v-if="ok" key="burningSnow">burningSnow</p>
			<p v-else key="燃情雪">燃情雪</p>
			<!-- 只是移除DOM中相应的元素，并没有删除内存中相应的元素 -->
			<!-- 频繁切换用v-show比较好，快直接从内存中拿 -->
			<p v-show="ok">fullcitySnow</p>
			<p v-show="!ok">满城雪</p>
			<button @click="ok=!ok">toggle</button><br />
			
			<!-- 
			Vue中的“就地复用”策略
			没有光标的变化，说明元素被复用
			当发现条件块中存在可复用元素【标签一样】，v-if指令切换时
			Vue不会从新在此渲染一个新的元素，而是选择可复用
			元素，渲染部分不同特性和样式 
			-->
			<template v-if="active">
				<label>userName</label>
				<input :style="{fontSize: 20 + 'px'}" placeholder="this is one type" value="ss" />
			</template>
			<template v-else>
				<label>userPhone</label>
				<input :style="{fontSize: 30 + 'px'}" placeholder="this is another type" />
			</template>
			<button @click="active=!active">toggle</button>
		</div>
	</body>
	<script src="js/vue2.0.js"></script>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#app',
			data: {
				ok: false,
				active: true
			}
		})
	</script>
</html>

菜鸟爬行中…