Vue——03-03v-show与v-if的区别

最新推荐文章于 2024-01-15 10:43:56 发布

Southern Wind

最新推荐文章于 2024-01-15 10:43:56 发布

阅读量117

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/nanchen_J/article/details/120866040

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

v-show：判断条件语句和v-if基本一致

其区别为：

v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

说简单点就是v-if是内容完全消失，v-show是内容隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if与v-show的区别</title>
	</head>
	<body>
		<div id="app">
           <div v-if="isShow">isshow是true的时候显示</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					isShow:true        //这里为true
				},
			})
		</script>
	</body>
</html>

v-if中的isShow如果存在，那么他会显示

如果为false它就不会存在

isShow:false

而v-show并不是这样

当为true时：

当为false时，实际他还是存在，只不过是隐藏了起来

Southern Wind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue——03-03v-show与v-if的区别

v-show：判断条件语句和v-if基本一致其区别为： v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。 v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。说简...
复制链接

扫一扫