vue3 使用ref 获取 dom 元素的高度

最新推荐文章于 2024-07-26 15:59:09 发布
最新推荐文章于 2024-07-26 15:59:09 发布
阅读量9k 收藏 10
点赞数 2
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44694453/article/details/129030752
版权
该代码示例展示了在Vue.js应用中，如何利用模板语法创建一个div元素，并在组件挂载后，通过ref属性获取该元素的clientHeight。onMounted生命周期钩子被用来确保在DOM渲染完成后执行相关操作，console.log打印出元素的高度。CSS部分定义了.search类的样式。
摘要由CSDN通过智能技术生成

代码实现：

<template>
  <div ref="mains" class="search"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const mains = ref()

onMounted(() => {
  const height = mains.value.clientHeight
  console.log(height, 1234)
})
</script>

<style scoped lang="less">
.search {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: greenyellow;
}
</style>

输出结果：

 

开开酷酷
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中获取dom高度
m0_50207524的博客
05-28 1249
offsetHeight 属性可以获取元素的高度（包括元素的边框、内边距和内容区域）
vue 监听屏幕高度的实例
12-12
项目用vue版本是2.0的，项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把[removed]事件挂在到mounted mounted() { const that = this [removed] = () => { return (() => { window.fullHeight = document.documentElement.clientHeight
vue获取dom元素注意事项
08-28
主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
Vue 中获取 DOM 元素的高度
qq_44776454的博客
05-28 808
Vue 获取DOM 大小位置 属性
VUE3 获取元素高度
qq_46416934的博客
02-23 9746
<v-header ref="headerRef" /> <v-tags ref="tagsRef"></v-tags> import { ref, reactive, onMounted, watch } from 'vue' setup() { let clientHeight = ref('') //浏览器可视区域高度 const headerRef = ref(null) const tagsRef = ref(null) let slbHeight = r
在Vue中获取DOM元素的实际宽高
pckzzy115的博客
08-22 1227
为了保险起见，所有的 DOM 操作建议都放在。来获取一个真实的 DOM 元素。
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
vue3之vue3.2获取dom元素的宽高
qq_44523450的博客
07-01 1万+
vue3.2获取dom元素的宽高
vue3获取、设置元素高度
最新发布
DN金猿的博客
07-26 522
以上就是傻喵使用vue3来操作元素高度的总结，还有很多坑点需要去研究。也欢迎各位大大在评论区留言，指点一下。vue3获取、设置元素高度 - 掘金 (juejin.cn)
Vue 通过组件的ref获取元素的高度。
u012632105的博客
09-12 5359
属性获取组件的 DOM 元素。获取 DOM 元素之后，可以通过。属性获取了它的高度。最后，我们将获取到的高度打印到控制台中。属性获取元素的高度。在上面的代码中，我们首先定义了一个。方法会被调用，它会打印出。在 Vue 中，可以通过。当我们点击页面中的按钮时，
vue 3.0 使用ref获取dom元素
热门推荐
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
vue3中用ref拿到dom元素
weixin_49343253的博客
03-23 3415
实现场景：有多个表单元素组件validate-input，内部可以实现验证功能（即验证表单输入是否满足条件），并且有返回值（true表示满足，false表示不满足），将他们包裹在一个父组件validate-form中，将父组件放在app.vue中，若想在app.vue中拿到父组件中的属性，则需要先获取到该元素节点。 这就需要在父组件中拿到子组件的dom节点 在vue2中，我们可以通过ref拿到一个元素节点 <div ref="myRef"></div> thi...
web前端之vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-26 1260
web前端之vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle
vue3中自定义指令之动态根据页面高度设置元素的高度
wch19960518的博客
04-30 781
自定义指令
vue获取dom高度
tmiaot的博客
02-11 1万+
//获取高度值 var height= this.$refs.text.offsetHeight; //100 //获取元素样式值,element 为元素ref="element" var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px //获取元素内联样式值 var heightStyle...
vue如何获取一个元素的高度
weixin_35754962的博客
02-13 5959
Vue 中获取一个元素的高度可以使用 JavaScript 原生方法或者 Vue 内置的 $refs。 使用 JavaScript 原生方法： 可以在 mounted 钩子函数中获取到元素，然后使用 offsetHeight 属性获取元素高度。 mounted () { let element = this.$el.querySelector('.element') let heigh...
vue3使用ref获取dom元素
06-10
在Vue 3中，可以使用`ref`来获取DOM元素，具体做法如下： 1. 在模板中使用`ref`来定义一个引用名，如下： ```html <template> <div> <div ref="myDiv">这是一个DIV元素</div> </div> </template> ``` 2. 在Vue组件中，使用`ref`来获取引用的DOM元素，如下： ```js import { ref, onMounted } from 'vue'; export default { setup() { const myDiv = ref(null); onMounted(() => { console.log(myDiv.value); // 输出引用的DOM元素 }); return { myDiv }; } } ``` 在上面的例子中，我们先使用`ref`定义了一个名为`myDiv`的引用，然后在`setup()`函数中，我们使用`onMounted`钩子，等组件挂载后，再输出引用的DOM元素。 需要注意的是，由于`ref`在`setup()`函数中返回的是一个响应式对象，因此在访问引用的DOM元素时，需要通过`.value`来获取实际的DOM元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值