然后,在Vue实例中,可以通过
$refs
属性获取
<div>
元素的引用,并通过
offsetHeight
属性获取其高度。例如:
export default {
mounted() {
const height = this.$refs.myDiv.offsetHeight
console.log('myDiv的高度为:', height)
使用Vue的计算属性
另一种方式是使用Vue的计算属性。首先,给<div>
元素绑定一个class
,并在该类中指定样式,例如:
<template>
<div :class="{ 'my-class': true }">这是一个<div>元素</div></div>
</template>
<style>
.my-class {
height: auto;
</style>
然后,在Vue实例中,定义一个计算属性,通过该属性获取<div>
元素的高度。在该计算属性中,需要先获取<div>
元素的引用,然后通过其offsetHeight
属性获取高度。例如:
export default {
computed: {
myDivHeight() {
const div = document.querySelector('.my-class')
return div ? div.offsetHeight : 0
mounted() {
console.log('myDiv的高度为:', this.myDivHeight)
以上就是两种动态获取<div>
元素高度的方法。需要注意的是,在获取元素高度之前,需要确保该元素已经被渲染到页面上,否则可能会获取不到正确的高度。