VUE之 v-if 、v-else-if、和 v-show 的使用和特点

最新推荐文章于 2023-07-16 16:06:28 发布

古雅学长

最新推荐文章于 2023-07-16 16:06:28 发布

阅读量502

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_46179813/article/details/106388185

版权

VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1、v-if 的特点：每次都会重新删除或创建元素

2、v-if 有较高的切换性能消耗

3、如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

4、v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

5、v-show 有较高的初始渲染消耗

6、如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show

<body>
		<div id="app">
			<input type="button" value="测试v-if和v-show" @click="flag=!flag">
			<!-- v-if 的特点：每次都会重新删除或创建元素 -->
			<!-- v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->
			<!-- v-if 有较高的切换性能消耗 -->
			<!-- v-show 有较高的初始渲染消耗 -->
			<!-- 如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show -->
			<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
			<h1 v-if="flag">我是使用v-if绑定</h1>
			v-else-if的使用
			<h1 v-if="score>=90">优秀</h1>
			<h1 v-else-if="score<90&&>=80">良好</h1>
			
			<h1 v-show="flag">我是使用v-show绑定</h1>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				flag:true,
				score:10
			},
			methods:{
				
			}
		})
	</script>

古雅学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE之 v-if 、v-else-if、和 v-show 的使用和特点

1、v-if 的特点：每次都会重新删除或创建元素2、v-if 有较高的切换性能消耗3、如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if4、v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式5、v-show 有较高的初始渲染消耗6、如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show<body> <div id="app"> <input type="but
复制链接

扫一扫