Vue学习笔记——v-show实现原理

最新推荐文章于 2023-12-11 14:22:31 发布
最新推荐文章于 2023-12-11 14:22:31 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： Vue 文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44154577/article/details/114380801
版权

v-show例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-show指令</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	
	<body>
		<div id="app">
		<input type="button" value="切换显示状态" @click="changeIsShow" />
		<input type="button" value="累加年龄" @click="addAge" />
		<input type="button" value="递减年龄" @click="subAge" />
		<img v-show="isShow" src="./show.JPG" height="300px" alt="" />
		<img v-show="age>=18" src="./show.JPG" height="300px" alt="" />
		
		</div>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					isShow: false,
					age:16
				},
				methods:{
					changeIsShow:function(){
						this.isShow = !this.isShow;
					},
					addAge:function(){
						this.age++;
					},
					subAge:function(){
						this.age--;
					}
				},
			})
		</script>
	</body>
</html>

浏览器审查
通过浏览器控制台发现，当v-show条件值为false时，HTML还是存在着这两个元素，只是通过display把它隐藏了起来
在这里插入图片描述
通过切换状态发现果真如此

实现原理：v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏

渣渣圆
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
v-for的原理.rtf
02-06
  1、v-if               写法：                   (1)、v-if=“表达式”                   (2)、v-else-if="表达式"                   (3)、v-else=“表达式”               适用于：切换频率较低的场景               特点：不展示的DOM元素直接被移除               注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被打断         2、v-show               写法：v-show=“表达式”               适用于：切换频率较高的场景               特点：没有展示的DOM元素没有被移除，仅仅是使用样式隐藏掉。         3、备注：使用v-if的时候，元素可能无法获...
Vue中的v-show和v-if怎么理解？
huihui_999的博客
05-07 97
Vue中的v-show和v-if怎么理解
Vue中 v-show 和 v-if 有什么区别
最新发布
He_9a9的博客
12-11 640
指令实现了一种惰性地渲染元素的机制，它会根据条件表达式的值动态地创建或销毁元素及其 DOM 结构。根据具体的需求和性能考虑，选择合适的指令来控制元素的显示与隐藏。根据具体需求和性能考虑，选择适合的指令来控制元素的显示和隐藏。：在编译模板过程中，当遇到带有 v-if 指令的元素时，会将该指令解析成一个对应的 Vue 实例中的。当一个页面需要根据用户登录状态来显示不同的内容时，可以使用 v-if 指令。：当条件表达式的值发生变化时，Vue 实例会通过指令对象的。的值，可以动态地切换显示不同的内容。
Vue(三)：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
weixin_51000853的博客
09-04 536
方法来排序，计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了。（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的，不写的时候默认index作为key。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
VUE学习：vue简介、vue指令
H215919719的博客
11-01 692
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue(v-show简介)
热门推荐
Mr顺
12-13 3万+
v-show简介 1.v-show指令的作用是：根据切换元素的显示状态 2.原理是修改元素 的display，实现显示隐藏 3.指令后面的内容，最终都会解析为布尔值 4.值为true元素显示，值为false元素隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
v-if和v-show的详解
weixin_70245286的博客
08-26 907
v-if和v-show
vue /v-show和v-if
m0_73495603的博客
09-19 827
v-if和v-show
vue3组件无根节点时v-show=false不生效
qq_44165941的博客
08-25 2167
vue在子组件上使用v-show时，当组件没有根节点时，v-show=false仍会显示子组件内容
vue3学习笔记——第三节
Twi_TiAmo的博客
10-12 243
vue3学习笔记——第三节1. 内置组件1. Fragment2. Teleport：传送3. Suspense（试验性）999. vue3内容持续学习... 1. 内置组件 1. Fragment 在vue2中：组件必须要有一个根标签 在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中 好处：减少标签层级，减小内存占用 2. Teleport：传送 什么是Teleport？—— Teleport是一种能够将我们的组件html结构移动到指定位置的技术 举例：项目中的
vue学习笔记之v-if和v-show的区别
12-11
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，...
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.js使用v-if实现显示与隐藏功能示例
10-18
主要介绍了vue.js使用v-if实现显示与隐藏功能,结合简单实例形式分析了使用v-if进行判断实现元素的显示与隐藏功能,需要的朋友可以参考下
谈谈Vue.js——vue-resource全攻略
11-26
概述 ...也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后
Vue学习笔记——基础语法{{ }}
weixin_44154577的博客
03-04 6057
Vue学习笔记 {{ }}大括号，也是最常用的取值符号，用来渲染data里面的数据 <body> <div id="app"> {{message}} <H2>{{people.name}} {{people.sno}}</H2> <ul> <li>{{campus[0]}}</li> <li>{{campus[1]}}</li> <li>{{c
Vue学习笔记——v-if实现原理
weixin_44154577的博客
03-04 4306
v-if <div id="app"> <p v-if="isShow">v-if</p> <h2 v-if="temperature>=35">热死了</h2> <input type="button" value="切换" @click="toggleIsShow()" /> <input type="button" value="+" @click="add()" /> <input type=
Vue学习笔记——计算属性计算数组价格
weixin_44154577的博客
03-06 967
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app">
V-model双向绑定数据
weixin_44154577的博客
04-11 782
一丶v-model 表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单 Vue中使用v-model指令来实现表单元素和数据的双向绑定 v-model其实是一个语法糖，他背后的本质上是包含两个操作 v-bind绑定一个value属性 v-on指令给当前元素绑定input事件 <input type="text" v-model="message"> <!--等用于下面 --> <input type="text" :value="message" @i
vue2和3的v-model实现原理
07-09
Vue 2和Vue 3的v-model实现原理有一些区别。 在Vue 2中，v-model是一个语法糖，它实际上是通过将value属性和input事件绑定到一个组件上实现的。当你在组件中使用v-model时，Vue会自动为组件生成一个value属性，并将该属性的值传递给组件。同时，Vue也会监听组件内部input事件，并根据事件的值更新组件的value属性。 在Vue 3中，v-model的实现方式有所改变。Vue 3使用了新的Composition API，其中的一个函数叫做`vModel`。你可以使用`vModel`函数来创建一个自定义的双向绑定指令。这个指令需要接收一个modelValue参数，用于表示所绑定的值，同时还需要提供一个update:modelValue函数，用于更新绑定的值。 通过使用`vModel`函数，你可以在组件中使用v-model指令，并将其绑定到组件内部的属性上。当用户在组件中修改这个属性时，`vModel`函数会自动调用update:modelValue函数来更新绑定的值。 总结一下，Vue 2中的v-model是通过绑定value属性和input事件实现双向绑定的，而Vue 3中的v-model则是通过使用`vModel`函数创建自定义的双向绑定指令实现的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

渣渣圆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值