v-if 和 v-show 的区别

最新推荐文章于 2023-02-17 22:46:49 发布
最新推荐文章于 2023-02-17 22:46:49 发布
阅读量130 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Charonmomo/article/details/120993983
版权

以前只知道v-if不会保留dom元素, 但v-show会, 也没单独试验过. 我以为就是设置了不可见而已, 宽高什么的都在.

今天才知道 v-show 只是保存了一个dom元素而已, 就是控制台查看源代码可以看得见, 但是页面上是没有这个元素的.

在这里插入图片描述
在这里插入图片描述

Charonmomo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 3，用于监听某一个实例宽高 ，解决v-show下，读取宽高为0和两端自适应等问题
qq_41411483的博客
10-11 2362
不知道你是否面临过这样一个问题，当用display来实现某组件的显示和隐藏时，会导致你所监听的实例宽高为0（监听事件：通过ref获取实例宽高）。 const btnSlider = ref(null) // 获得对应实例，这里记得在setuo()中return出去 const getBtnSlider = () => { return unref(btnSlider) } const getBtnSize = () => { // 用来获取当前滑动按钮的宽度或长度
vue中的v-if和v-show的区别详解
10-16
Vue.js 是一个流行的前端框架，它提供了一套强大的指令系统，其中包括 `v-if` 和 `v-show`，这两个指令在视图层的条件渲染中扮演着重要角色。它们的主要目标都是根据条件决定元素是否应该被展示，但在实现方式上存在...
父组件设置v-show，请求成功后置为true，子组件高度为0
勋勋勋勋小勋勋的博客
12-05 911
将v-show设为v-if v-show与v-if 相同点：功能控制元素的显隐性 不同点： v-if：对元素进行销毁和重建。若初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。 v-show：只是简单地 CSS 对元素进行切换。通过display来控制显示或隐藏 ...
Vuejs中v-if v-show无法获取div高度
qq_39598092的博客
07-17 3049
场景：点击更多的时候 筛选项对增多 红框中的高度会发生变化 下面的列表会距离顶部的距离会发生变化 开始的时候我是通过ref获取红框中的高度 但拿不到 后来又用了id拿到的重视上一次的高度 于是百度查找用$nextTick 解决方法如下 moreBtn(){ this.isMore=!this.isMore; /*if(this.isMore){ ...
Vue中 v-if 和 v-show 的使用
热爱编程、热爱生活、热爱探索
02-17 791
隐藏的DOM，它的宽度、高度等各种属性值不会丢失，仍然会咱局页面上原有的位置，只是视觉上的隐藏。：都能将DOM从页面中进行隐藏，但隐藏的DOM还在，能使用F12查看到。隐藏的DOM，它宽度、高度等各种属性值都将丢失，不占据页面上的位置。：都可以用来隐藏DOM，且隐藏的DOM不会占据空间。：判断表达式的真假，真就显示DOM，假就隐藏DOM。
弹窗使用v-show校验表单内容，保留原来的数据
weixin_53877433的博客
11-11 398
element dialog中有个属性，关闭弹框时销毁Dialog 中的元素 把destroy-on-close属性设置为true。：其实是因为v-show的特性，只是隐藏了弹框，并没有销毁，所以会导致输入的数据清空了，dom没有更新。：表单里有搜索的情况下，表单数据清空，里面的内容还在。：dialog使用v-show控制表单显隐。
vue v-if和v-show区别
qq_43393995的博客
09-02 2673
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法。v-if 在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分。在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。
v-if和v-show的区别
热门推荐
weixin_57519185的博客
11-05 3万+
一.v-show与v-if的共同点 在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示 。 当表达式都为 false 时，都不会占据页面位置 当表达式结果为 true 时，都会占据页面的位置 二、v-show与v-if的区别 控制手段不同 编译过程不同 编译条件不同 控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除...
v-if 和 v-show 区别
m0_61700036的博客
03-19 1043
v-if和v-show的区别: vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示，但是他们控制的原理是不同的。 v-if 的特点：每次都会重新删除或创建元素，v-if 有较高的切换性能消耗，如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，v-show 有较高的初始渲染消耗，如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-..
实例讲解v-if和v-show的区别
12-29
代码： <!DOCTYPE html> <... <head>... <div v-if=isIf>v-if <div v-show=ifShow>v-show <button @click=toggleShow()>点击按钮</button> </body> [removed]</scrip
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
深入理解vue.js中的v-if和v-show
12-02
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 1.共同点 都是动态显示DOM元素 2.区别 （1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-...
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
这种现象通常被称为"闪现"或"Flicker"，它可能由`v-if`、`v-show`以及插值表达式`{{}}`的不当使用引起。本文将深入探讨这个问题的原因，并提供有效的解决方案。 首先，我们来分析闪现的原因。Vue.js在处理页面时...
vue.js数据渲染完成后，获取页面高度问题
自酌一杯酒
02-11 1万+
获取整个页面的高度用的$(document).height(); 遇到的问题 在没有数据的时候页面的高度是690px; 调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）; 我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px; 解决问题 需要用到$......
Vue中获取v-if、v-show div高度
weixin_45461674的博客
07-14 2650
Vue中获取v-if、v-show div高度 在页面渲染完成后获取v-if出来的元素高度时发现一直打印出来的结果都时 0 ，后面查了好多资料，发现了this.$nextTick() 函数，但还是获取不到，后面我设置了一点点的延迟后发现获取到了 o(￣▽￣)ブ ...
vue学习笔记之v-if和v-show的区别
12-11
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件...
关于vuejs中v-if和v-show的区别及v-show不起作用问题
10-18
v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点
v-if 和 v-show区别
最新发布
10-29
v-if 和 v-show 都是 Vue.js 中的指令，用于控制元素的显示和隐藏。它们的区别在于： 1. v-if 是条件渲染，只有在表达式为 true 时才会渲染对应的元素，否则不会渲染。而 v-show 则是控制元素的显示和隐藏，无论...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Charonmomo

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

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

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

打赏作者

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

抵扣说明：

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

余额充值