vue学习笔记 v-show 和 v-if 的异同

最新推荐文章于 2023-06-07 10:18:26 发布
最新推荐文章于 2023-06-07 10:18:26 发布
阅读量79 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52336986/article/details/118598071
版权

v-show

v-show 的本质是操作css， 控制元素的display属性为none， 具有更高的初始开销
v-show 只会编译一次，只会就是控制css

v-if

v-if 的本质是在DOM树中增加和删除元素， 具有更高的切换开销
v-if也是惰性的，只有当第一次条件为真时才会渲染，如果第一次条件为假则不进行渲染
v-if会不停销毁和创建
总结 ： 对于切换频繁的用 v-show 更好， 而切换不频繁的用 v-if 更好

做李的英雄
关注
专栏目录
Vue 条件渲染（v-if 与 v-show）——Vue 学习笔记（六）
ySFRaabbcc的博客
11-12 447
v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。例如: 不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 （1）在 <template> 元素上使用 v-if 条件渲染分组 因为 v-if 是一个指令，所以必须将它添加到一个元素上。 如果想渲染多个元素，可以把一个 <template> 元素当作不可见的包裹元素，并在上面.
Vue基础6天实施笔记
weixin_44867717的博客
02-09 1935
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
虚拟DOM和diff算法 ,v-if和v-show区别
m0_74076766的博客
12-02 353
虚拟DOM和diff算法 ,v-if和v-show区别
Vue的v-if和v-show的区别和本质
weixin_42575505的博客
02-16 83
v-if 和 v-show 是 Vue 中用于条件渲染的指令。它们的区别和本质如下： 区别 v-if：根据表达式的值来决定是否渲染元素。如果表达式的值为 false，那么元素将被移除 DOM。 v-show：根据表达式的值来决定元素的显示或隐藏。如果表达式的值为 false，那么元素将被隐藏，但并不会被移除 DOM。 本质 v-if：在条件为 false 时，Vue 会从 DOM 中...
v-show和v-if
佛系小菜鸡的博客
02-17 160
共同点 两者的作用都是根据表达式的真假切换元素的显示状态 不同点 v-if 1）原理是修改元素的display样式，实现显示和隐藏的效果 2）消耗的性能小 v-show 1）v-if的本质是通过操纵dom元素来切换现实状态，表达式的值为true，元素存在于dom树中，为flase，从dom树中移除。 2）消耗的性能大 适用场景 频繁的切换使用v-show，否则使用v-if，因为v-if切换消耗...
vue基础指令if和show的区别
ADwblj的博客
12-08 1007
v-if与v-show的区别
Vue指令中，v-if和v-show的区别
lizhichengwei的博客
12-02 243
他们各自有各自的应用场景，就比如在我们做登录页面的登录方式的切换的时候，这时候我们用v-if会比较合适，切换次数较少，而在我们做页面弹窗或者移入移出隐藏显示的时候，我们可以用v-show的指令来进行操作。，要么显示要么隐藏的情况，我会用到v-if。因为v-if是惰性的，如果初始值为false，那么这些元素就直接不创建了，这样可以节省一些初始渲染开销。时就会用到v-show，因为v-if在频繁切换上会大量的创建和删除元素，消耗性能。一般匀速需要频繁切换，也就是说。
Freeswitch学习笔记（一）：Sip协议
weixin_42211693的博客
06-07 1863
SIP定义了6种基本方法除此之外，SIP还定义了一些扩展方法，如SUBSCRIBE、NOTIFY、MESSAGE、REFER、INFO等， 无论是基本方法还是扩展方法，所有 SIP 消息都必须包含以下6个头域。
Vue2面试题
m0_70647221的博客
05-10 169
Vue2的双向数据绑定原理？ Vue中数据代理？ 组件之间的传值方式有哪些？ computed和watch的区别？ 谈一下key值的作用？说一下diff算法？ 为什么用中括号操作数组，Vue不更新页面？ Vue的生命周期？ Vue事件绑定原理说一下？ Vuex说一下？ 不需要响应式的数据应该怎么处理？ 父子组件生命周期顺序？ 说说nextTick的用处？场景？ Vue的SSR？ 小知识点 [](()说一下Vue优缺点？ 优：渐进式，组件化，轻量级..
商城-文档
weixin_46925850的博客
07-28 7912
谷粒商城学习笔记
vue学习之v-if
weixin_43209759的博客
03-18 234
@[TOC](vue学习之v-ifv-if v-if v-if指令的作用是：根据表达式的真假切换元素的显示状态 本质是通过操纵dom元素切换显示状态 表达式的值为true，元素存在于dom树中，表达式为false，元素从dom树中移除 频繁地使用我们使用v-show反之使用v-if，前者的切换消耗小。 ...
v-if指令
热门推荐
青柠晶晶的博客
08-03 4万+
1.v-if指令的作用是：根据表达式的真假切换元素的显示状态 2.本质是通过操纵dom元素来切换显示状态 3.表达式的值为true,元素存在于dom树中，为false,从dom树中移除 4.频繁的切换使用v-show,反之使用v-if,前者的切换消耗小 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-
Vue指令之v-if
俊而不逊的博客
11-23 2万+
Vue指令之v-if v-if指令根据表达式的值的真假，切换元素的显示和隐藏，其实是在操作dom元素; v-if和js里的if差不多，也会有v-else-if和v-else，js里的if判断是用于在js语法里面的判断，v-if在vue中是对于代码块的判断； 如 <p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p> 当指令的判断isShow为true时，p标签则会生成，进而在页面中显示出来，反之在编...
Vue中指令v-if，v-show的实质区别
CSDN for recording problems
03-05 587
v-if操作的是dom，而v-show操作的是样式，所以说v-if隐藏的是dom，v-show隐藏的是样式，dom节点并没有被隐藏。 建议 如果是频繁操作dom的话建议使用v-show，一遍提高浏览性能。 ...
vue底层原理： v-if
qq_36413371的博客
05-19 1882
这是一个递归遍历dom的属性（v-if）根据值进行删除元素，连接 vue中vue实现原理： Vue进行了如下转化template —> ast语法树 —> render函数，最后根据生成的render函数来生成相应的DOM，这里就不拓展讲了。在生成ast和render函数的时候，Vue对v-if这一类指令进行了解析。 参考连接 ...
v-if和v-show、display: none和visibility：hidden的区别
weixin_39147099的博客
12-17 8549
v-if指令和v-show指令的区别 相同点：都可以控制标签的显隐。 不同点： 一、实现本质方法区别 v-if是动态的向DOM树内添加或者删除DOM元素 v-show本质是利用标签的display属性，通过visibility和none控制显隐 v-if="false"在DOM不能获取到该标签 v-show=false在DOM中仍能获取到该标签 二、编译的区别 v-show其实是在控制c...
vue核心面试题：vue中的v-if和v-show
王三六博客
08-12 1219
一、v-if和v-show的区别 1.理解： （1）v-if 如果条件不成立不会渲染当前指令所在节点的 dom 元素，是不存在dom元素的。 （2）v-show只是对当前 dom 的进行显示或者隐藏 ，相当于display：none或者black。 （3）v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多。 （4）v-if 有更高的切换开销，v-show 切换开销小。 2.原理 const VueTemplateCompiler = require('vue-temp.
vue 中 v-if 和 v-show 的区别
webxiaoma
05-18 1万+
vue 中 v-if 和 v-show 的区别
基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计
最新发布
09-27
基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计，含有代码注释，满分课程设计资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计，含有代码注释，满分课程设计资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计，含有代码注释，满分课程设计资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。基于opencv实现象棋识别及棋谱定位python源码+数据集
Vue条件渲染：v-if/v-else-if/v-show与v-for实例解析
1. **v-if** 和 **v-else-if** 用于基于数据条件的元素展示。`v-if` 会在条件为真时插入元素，而 `v-else-if` 用于在前一个条件为假时检查下一个条件。例如： ```html <p v-if="seen">现在你看到我了 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值