v-if和v-show

最新推荐文章于 2023-08-26 07:59:06 发布

雅痞子军

最新推荐文章于 2023-08-26 07:59:06 发布

阅读量108

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_1724201421/article/details/80100197

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面介绍下Vue常见指令v-if和v-show:

v-if:

作用：判断是否加载固定的内容，如果是真，就加载，否则就不加载

语法：v-if="判断表达式"

v-show:

作用：判断是否显示内容

语法：v-show="判断表达式"

v-if和v-show的相同点和不同点：

1.相同点：都可以实现对于一个元素的显示和隐藏操作。

2.不同点：v-if是将元素添加或移除DOM树模型中，v-show只是在这个元素上决定是否添加CSS规则display:show;而已。

3.v-if有更高的切换消耗，安全性高。v-show的初始化消耗大一点。如果需要频繁切换并对安全性没有要求时，可以使用v-show。如果在运行时，条件不可能改变的话，使用v-if更好一点。

看下面一段代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-if和v-show</title>
		<!--引入vue.js-->
		<script src="js/vue1.js"></script>
	</head>
	<body>
	    <!--创建模板-->
	    <div id="app">
	       <!--v-if-->
	       <h1 v-if='isShow'>小军</h1>
	       <!--v-show-->
	        <h1 v-show='isShow'>小军</h1>
	     </div>
		
             <!--创建vue对象-->
	       <script>
		  new Vue({
		     //管理边界
		    el:'#app',
	             //data 存放数据
		    data:{
		       isShow:true
		     }
		   })
		</script>
	</body>
</html>

运行结果图如下：

雅痞子军

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-if和v-show

下面介绍下Vue常见指令v-if和v-show:v-if:作用：判断是否加载固定的内容，如果是真，就加载，否则就不加载语法：v-if="判断表达式"v-show:作用：判断是否显示内容语法：v-show="判断表达式"v-if和v-show的相同点和不同点：1.相同点：都可以实现对于一个元素的显示和隐藏操作。2.不同点：v-if是将元素添加或移除DOM树模型中，v-show只是在这个元素上决定是否...
复制链接

扫一扫