vue怎么获取dom的高度

百变鹏仔 3周前 (09-25) #VUE

文章标签高度

在 vue 中获取 dom 高度的方法有：1. v-bind:style；2. ref + javascript；3. vue.nexttick；4. 计算属性；5. 自定义指令。选择方法时需考虑性能和灵活性。

Vue 中获取 DOM 高度

在 Vue 中，获取 DOM 元素的高度有以下几种方法：

1. v-bind:style

<div v-bind:style="{ height: '100px' }"></div>

2. ref + JavaScript

立即学习“前端免费学习笔记（深入）”；

<div ref="myElement"></div>mounted() {  const height = this.$refs.myElement.clientHeight;}

3. Vue.nextTick

Vue.nextTick(() =&gt; {  const height = this.$refs.myElement.clientHeight;});

4. 计算属性

computed: {  height() {    return this.$refs.myElement.clientHeight;  }}

5. 自定义指令

Vue.directive('height', {  inserted(el) {    el.style.height = el.clientHeight + 'px';  }});<div v-height></div>

选择合适的方法

选择哪种方法取决于性能和灵活性方面的考虑：

根据具体需求，选择最合适的方法来获取 DOM 高度的可能性。

文章推荐