vue条件判断

最新推荐文章于 2024-05-21 18:11:13 发布

Krismile S

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量299

点赞数

分类专栏： vue2单个知识点文章标签： html 前端

本文链接：https://blog.csdn.net/m0_73894967/article/details/130688295

版权

vue2单个知识点专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.v-if 元素的创建与销毁的过程

条件为true --- 创建

条件为false --- 销毁 --- 默认开始 - false 不创建不销毁

v-if v-else-if v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 v-if="a !== 1">张三</h1>
			<h1 v-else-if="b!==2">王五</h1>
			<h1 v-else>李四</h1>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					a:1,
					b:2,
					bool:true
				}
			})
			
			
		</script>
	</body>
</html>
<!-- 
	v-if
	v-else
	v-else-if
 -->

2.v-show 元素的显示与隐藏

通过控制css样式中 display属性的值来进行元素的显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 v-show="bool">v-show</h1>
			<h1 v-show="a==1">v-show</h1>
			<h1 v-show="false">v-show</h1>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					a:1,
					b:2,
					bool:true
				}
			})
			
			
		</script>
	</body>
</html>

3.v-if与v-show的区别

操作:

v-if: 将dom元素创建或删除

v-show:控制css中display属性进行显示隐藏

编译条件:

v-if:惰性的,只有表达式为true,进行编译缓存渲染

v-show:无论表达式值是true或者false,都会进行编译缓存渲染

编译过程:

v-if:局部编译,切换时会重建或销毁组件内部的事件监听和子组件

v-show:编译之后基于css进行显示隐藏,dom始终存在

消耗:

v-if:切换消耗高

v-show:首次渲染加载消耗高

应用:

v-if:切换条件较少

v-show:切换条件较多

Krismile S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue条件判断

条件为false --- 销毁 --- 默认开始 - false 不创建不销毁。v-show:无论表达式值是true或者false,都会进行编译缓存渲染。v-if:局部编译,切换时会重建或销毁组件内部的事件监听和子组件。v-show:编译之后基于css进行显示隐藏,dom始终存在。v-show:控制css中display属性进行显示隐藏。v-if:惰性的,只有表达式为true,进行编译缓存渲染。条件为true --- 创建。v-show:切换条件较多。3.v-if与v-show的区别。
复制链接

扫一扫