vue js 获取盒子的高度
时间: 2023-12-02 16:03:32 浏览: 159
解决vue项目获取dom元素宽高总是不准确问题
你可以使用 Vue.js 的 `ref` 属性来获取一个元素的高度。`ref` 允许你为元素添加一个引用,然后在 Vue 实例中使用 `$refs` 来获取该元素的引用。
例如,假设你有一个元素如下:
```html
<div ref="myBox">这是一个盒子</div>
```
你可以在 Vue 实例中使用 `$refs` 来获取该元素的引用,如下所示:
```javascript
new Vue({
el: '#app',
mounted() {
const height = this.$refs.myBox.offsetHeight;
console.log('盒子的高度是:', height);
}
})
```
在上面的代码中,`mounted` 生命周期钩子函数会在 Vue 实例挂载到页面上之后被调用。在该函数中,我们使用 `this.$refs.myBox` 来获取元素的引用,然后使用 `offsetHeight` 属性来获取该元素的高度。最后,我们将高度打印到控制台中。
阅读全文