Vue常用指令v-if与v-show的区别浅析

程序员文章站 2022-07-06 08:08:37

目录前言v-show 和v-if 是比较常用的vue指令，经常用来判断渲染部分代码块，但两者具体的区别在哪里呢？？？首先我们可以来看一下vue中文社区说明文档的介绍:vue中文社区说明文档中简单来说...

前言

v-show 和v-if 是比较常用的vue指令，经常用来判断渲染部分代码块，但两者具体的区别在哪里呢？？？

首先我们可以来看一下vue中文社区说明文档的介绍:

Vue常用指令v-if与v-show的区别浅析

vue中文社区说明文档中简单来说是：初始渲染的时候进行条件判断展示；

1. v-show

v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的

语法表达v-show = " 表达式 "

原理是修改元素的的css属性(display)来决定实现显示还是隐藏

指令后面的内容最终都会解析为布尔值

值为真(true)的时候元素显示，值为假(false)的时候元素隐藏

数据改变之后呢对应的元素的显示状态也是会同步更新的

<body>
		<div id="app">
			<input type="button" value="切换显示" @click="changeisshow" />
			<p v-show="isshow">不装了，我摊牌了，没错你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new vue({
				el:"#app",
				data:{
					isshow:false
				},
				methods:{
					changeisshow(){
						this.isshow = !this.isshow
					}
					
				}
			})
		</script>
	</body>

2. v-if

v-if指令的作用：根据表达式的真假切换元素的显示状态

v-if = "表达式"

本质是通过操纵dom元素来进行切换显示

表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

<body>
		<div id="app">
			<input type="button" value="点我切换显示" @click="changeisshow" />
			<p v-if="isshow">不装了，我摊牌了，没错你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new vue({
				el:"#app",
				data:{
					isshow:false
				},
				methods:{
					changeisshow(){
						this.isshow = !this.isshow
					}
				}
			})
		</script>
	</body>

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

1. 在原理方面的区别

v-show指令：元素始终被渲染到html，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的css属性(display)来决定实现显示还是隐藏
v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示

2. 在使用应用场景方面的区别

v-if需要操作dom元素，有更高的切换消耗.
v-show只是修改元素的的css属性有更高的初始渲染消耗。
如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

总结

到此这篇关于vue常用指令v-if与v-show区别的文章就介绍到这了,更多相关vue指令v-if与v-show区别内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

Vue常用指令v-if与v-show的区别浅析

目录

前言

1. v-show

2. v-if

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

1. 在原理方面的区别

2. 在使用应用场景方面的区别

总结

详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

深入浅析Vue全局组件与局部组件的区别

浅析Vue中method与computed的区别

vue学习笔记之v-if和v-show的区别

vue中的v-if和v-show的区别详解

Vue常用指令v-if与v-show的区别浅析

vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

vue中v-model指令与.sync修饰符的区别详解

angularjs和angular指令写法的区别有哪些？AngularJs与Angular常用的指令写法区别的介绍

angularjs和angular指令写法的区别有哪些？AngularJs与Angular常用的指令写法区别的介绍