Vue中获取v-if、v-show div高度

最新推荐文章于 2024-07-19 10:16:01 发布
最新推荐文章于 2024-07-19 10:16:01 发布
阅读量2.7k 收藏
点赞数 3
分类专栏： VUE 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45461674/article/details/107333426
版权

Vue中获取v-if、v-show div高度

在页面渲染完成后获取v-if出来的元素高度时发现一直打印出来的结果都时 0
，后面查了好多资料，发现了this.$nextTick() 函数，但还是获取不到，后面我设置了一点点的延迟后发现获取到了 o(￣▽￣)ブ

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

·半傻半呆半疯癫
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
Vuejs中v-if v-show无法获取div高度
qq_39598092的博客
07-17 3103
场景：点击更多的时候 筛选项对增多 红框中的高度会发生变化 下面的列表会距离顶部的距离会发生变化 开始的时候我是通过ref获取红框中的高度 但拿不到 后来又用了id拿到的重视上一次的高度 于是百度查找用$nextTick 解决方法如下 moreBtn(){ this.isMore=!this.isMore; /*if(this.isMore){ ...
父组件设置v-show，请求成功后置为true，子组件高度为0
勋勋勋勋小勋勋的博客
12-05 943
将v-show设为v-if v-show与v-if 相同点：功能控制元素的显隐性 不同点： v-if：对元素进行销毁和重建。若初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。 v-show：只是简单地 CSS 对元素进行切换。通过display来控制显示或隐藏 ...
【Vue】`v-show` 指令详解：高效控制元素显示与隐藏的实用指南
最新发布
lph159的博客
07-19 1473
v-show是 Vue.js 提供的用于显示和隐藏元素的指令。与v-if不同，v-show通过切换元素的display样式来控制其显示或隐藏，而不是对元素进行销毁和重建。v-show的基本语法如下：
vue 获取动态元素高度--采坑
weixin_42508745的博客
03-30 3956
页面中搞一个区域用来scroll列表，所以必须要获取scroll-wrap的高度，于是想尽办法获取swipe、navbarBox的高度 <div v-if="data[column]"> <div class="columnPage" v-for='(item,index) in data' v-show='column == index'> <div c...
Vue 3，用于监听某一个实例宽高 ，解决v-show下，读取宽高为0和两端自适应等问题
qq_41411483的博客
10-11 2416
不知道你是否面临过这样一个问题，当用display来实现某组件的显示和隐藏时，会导致你所监听的实例宽高为0（监听事件：通过ref获取实例宽高）。 const btnSlider = ref(null) // 获得对应实例，这里记得在setuo()中return出去 const getBtnSlider = () => { return unref(btnSlider) } const getBtnSize = () => { // 用来获取当前滑动按钮的宽度或长度
Vue 在使用v-if的前提下，使用elementResizeDetector配合ref获取元素块的高度
wuyxinu的博客
07-18 935
前言 公司的项目主要以Vue + elementUI为主，最近公司项目需要做一个附件上传的组件，如下图，然而在做的过程中，遇到了一定的问题。在缩小浏览器时，备注部分与附件查看处的滚动条重合了，这就使得滚动条无法使用。 在这个情况下，我就想到，对备注部分的元素块note进行监听。因为缩小浏览器窗口，会使得note部分的width减少（设置为自动占比100%）,而在内容不变的情况下，势必会使该元素块的高度height增加。于是我就使用了elementResizeDetector对DOM进行监听。 核心代码
vue v-if 显示后元素自适应高度
kan_Feng的博客
10-09 1497
vue v-if 隐藏元素后显示，需要重新激活元素，才能设置元素自适应高度
vue中v-if和v-show的区别
科小洋的博客
03-03 362
v-if：当隐藏结构时该结构会直接移除； v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。 比如说 v-show是把元素隐藏了 元素如果有高度 也就没有了 v-if 会保留原来元素的高度 当组件中的内容只会显示或隐藏不会被再次改变显示状态和一些状态判断是 用v-if更加合适 当组件中的内容显示隐藏是可变化的，用v-show ...
vue2和vue3的v-if与v-for优先级对比学习
10-14
在这篇文章中，我们将深入探讨Vue 2.x和Vue 3.x中v-if和v-for这两个关键指令的优先级差异，以及如何在实践中更好地利用它们。 首先，v-if和v-for都是Vue中的条件指令，但它们的作用不同。v-if用于条件渲染，只有当...
对vue中v-if的常见使用方法详解
10-17
例如，在上面的代码中，`<div v-if="type == 'A'">A</div>` 只会在`type`属性等于'A'时显示。 2. **`v-else` 和 `v-else-if`** `v-else` 用于提供与`v-if`相反的条件，而`v-else-if`则用于链式条件检查。在上述...
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
10-17
在Vue框架中，v-if和v-else-if是条件渲染指令，用来根据表达式的真假来决定是否渲染某个元素。然而，在页面加载时，有时候会出现页面内容闪现的现象，即不满足条件的元素暂时显示出来，然后消失。这个问题主要是由于...
vue v-show失效解决方法
NEFU_kadia的博客
06-13 3063
很有可能是因为v-show的元素的class设置了display属性 解决办法：外面套一层div
Vue 使用 v-show 失效
萌宅鹿的技术小屋
07-14 6953
Vue v-show 失效问题描述解决方案 问题描述 如下代码：如果 MachineQuery 中使用了 element 的库（不确定是哪些组件），v-show 会失效… <machine-query v-show="siderBar == 'MachineQuery'" id="trace" ref="trace" /> 解决方案 1、使用 v-if 替换 v-show，这个不需要很费心，换个指令即可 2、如果有时候一定要使用 v-show，可以使用如下解决方案：在组件外套一层 div 即可
v-if导致用ref取不到元素的解决办法
weixin_45905700的博客
05-09 7921
今天在写一个功能的时候需要给一个用ref取到并且用this.$refs("")获取到的元素并且用this.$refs("XXX")[0].style渲染出来的div加一个提示框，当时第一反应是用vue的Tooltip 文字提示组件，比较方便，就用el-tooltip在外面包了一层。 错误写法： 需要提示的内容是需要在页面进行某一操作后才可以得到的，所以有可能是undefined，就自然而然的加入了v-if，但是只要这个v-if加上就开始报错，打印出来发现是this.$refs("")获取到的值u..
【vue3】onMounted获取元素高度不准确
此人太懒，没有任何简介
12-31 2499
【vue3】onMounted获取元素高度不准确
vue获取不到页面元素高度
树上骑个猴的博客
12-18 1730
比如我我想获取el-form的高度 <el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" > </el-form> 1.不要在created里面获取，因为界面dom还没挂载到页面上 2.el-form是elementui封装的元素，需要再获取的前提加一个$el， 就可以获取到其高度 this.refs.elForm.$el.offsetHeight 如果是
vue.js数据渲染完成后，获取页面高度问题
热门推荐
自酌一杯酒
02-11 1万+
获取整个页面的高度用的$(document).height(); 遇到的问题 在没有数据的时候页面的高度是690px; 调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）; 我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px; 解决问题 需要用到$......
VUE 条件渲染 v-if、v-show
大家好，我是+V
07-27 264
VUE 条件渲染 v-if、v-show 条件指令 v-if 是否渲染当前元素 v-else v-else-if v-show：与 v-if 类似，只是元素始终被渲染并保留在DOM中，只是简单的切换CSS属性display来显示或者隐藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
Vue中v-if和v-show区别
06-09
`v-if` 和 `v-show` 都是 Vue 中用于控制元素显示隐藏的指令，但它们的使用场景和实现方式略有不同。 `v-if` 指令的作用是根据表达式的值的真假条件来销毁或者重新创建元素及组件。当表达式的值为 false 时，元素会被销毁并从 DOM 中移除，当表达式的值为 true 时，元素会被重新创建并添加到 DOM 中。这种方式在不需要频繁切换元素显示状态的情况下，能够有效减少 DOM 的渲染次数，提高性能。 ```html <template> <div> <span v-if="show">我是一个v-if指令</span> <button @click="toggleShow">切换显示状态</button> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggleShow() { this.show = !this.show } } } </script> ``` `v-show` 指令的作用是根据表达式的值的真假条件来控制元素的显示或隐藏。当表达式的值为 false 时，元素会被隐藏，并且不会从 DOM 中移除，当表达式的值为 true 时，元素会被显示。这种方式适用于需要频繁切换元素显示状态的情况，但需要注意，由于元素并没有被销毁，因此可能会影响页面的性能。 ```html <template> <div> <span v-show="show">我是一个v-show指令</span> <button @click="toggleShow">切换显示状态</button> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggleShow() { this.show = !this.show } } } </script> ``` 总结来说： - `v-if` 适合在不需要频繁切换元素显示状态的情况下使用，可以减少 DOM 的渲染次数，提高性能。 - `v-show` 适合在需要频繁切换元素显示状态的情况下使用，但需要注意对页面性能的影响。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值