vue 修改dom 高度

要修改 Vue 中的 DOM 高度，您可以使用以下方法：

1. 使用动态绑定的方式绑定一个计算属性，然后在计算属性中计算高度，并将计算出的高度绑定到元素上：

<template>
  <div :style="{ height: computedHeight }"></div>
</template>

<script>
export default {
  data() {
    return {
      // 元素内容
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    };
  },
  computed: {
    // 计算元素高度
    computedHeight() {
      const el = this.$refs.myElement;
      return el ? `${el.offsetHeight}px` : 'auto';
    },
  },
};
</script>

2. 使用 `$nextTick` 方法等待 DOM 更新后再获取元素高度，并将计算出的高度绑定到元素上：

<template>
  <div ref="myElement" :style="{ height: dynamicHeight }"></div>
</template>

<script>
export default {
  data() {
    return {
      // 元素内容
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      // 动态计算的高度
      dynamicHeight: 'auto',
    };
  },
  mounted() {
    // 在下一个 DOM 更新周期中获取元素高度
    this.$nextTick(() => {
      const el = this.$refs.myElement;
      this.dynamicHeight = el ? `${el.offsetHeight}px` : 'auto';
    });
  },
};
</script>

以上两种方法都可以用来动态修改元素高度。方法一的优点是可以避免等待 DOM 更新，但是需要使用计算属性来计算高度。方法二的优点是简单直接，但是需要等待 DOM 更新后才能获取元素高度。