Vue的条件渲染-v-if与show的区别以及key值的作用

最新推荐文章于 2024-09-01 14:19:05 发布

置顶东陵十三

最新推荐文章于 2024-09-01 14:19:05 发布

阅读量841

点赞数 1

分类专栏：计算机前端开发文章标签： Vue2.6 条件渲染 v-if v-show key值

本文链接： https://blog.csdn.net/donglingjiu/article/details/100543801

版权

计算机同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

开发

73 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

v-if 条件渲染通过v-if指令结合js表达式返回值决定一个dom元素是否存在

1>标签一般成对使用标签之间不能有其他不相关的标签阻隔否则报错

2> 通过条件判断控制标签是否在页面上显示但是条件不匹配的标签不会出现在dom节点上

3>key值的作用

Vue在重新渲染页面的时候会尝试复用页面上已经存在的dom 给某个元素标签加上key值之后 Vue会认为

这是页面上唯一的元素，key值不一样重新渲染页面的时候 Vue就不会尝试复用了此处与虚拟dom有关

v-if与v-show的区别

v-show作用类似于v-if 通过条件判断控制模板标签在页面上显示 v-if为false的不匹配的标签 dom上不存在该标签节点

v-show 指令条件不匹配的标签节点还在dom上只不过是display:none

在需要经常改变dom元素隐藏显示的效果时 v-show性能更高不会频繁的在dom上删除增加节点

<body>
		<div id="app">
			<div v-if="str == 'a'">This is A</div>
			<div v-else-if="str == 'b'">This is B</div>
			<div v-else>This is others</div>
		</div>

		<script>
			var vm = new Vue({
				el:"#app" ,
				data:{
					str:"a" ,
				}
			})
		</script>
	</body>

v-if的 key值

<body>
		<div id="app">
			<div v-if="str == false">
				用户名:<input type="text" />
			</div>
			<div v-else>
				手机号:<input type="text" />
			</div>
		</div>

		<script>
			var vm = new Vue({
				el:"#app" ,
				data:{
					str:false ,
				}
			})
		</script>
	</body>

Vue在重新渲染页面的时候会尝试复用页面上已经存在的dom 给某个元素标签加上key值之后 Vue会认为

这是页面上唯一的元素，key值不一样重新渲染页面的时候 Vue就不会尝试复用了此处与虚拟dom有关

v-show

作用类似于v-if 通过条件判断控制模板标签在页面上显示 v-if为false的不匹配的标签 dom上不存在该标签节点

v-show 指令条件不匹配的标签节点还在dom上只不过是display:none

在需要经常改变dom元素隐藏显示的效果时 v-show性能更高不会频繁的在dom上删除增加节点

<div id="app">


			<div v-if="str" data-test="if">{{content}}</div>
			<div v-show="str" data-test="show">{{content}}</div>
			



		</div>

		<script>
			var vm = new Vue({
				el:"#app" ,
				data:{
					str:false ,
					content:"Hello Vue"
				}
			})
		</script>
	</body>