vue 监听 class 高度

Vue 监听 class 高度的一种常见方法是使用 `v-bind` 指令和计算属性。具体步骤如下：

1. 在需要监听高度变化的元素上绑定一个 class，例如 `my-class`。
2. 使用 `v-bind` 指令将这个 class 绑定到一个计算属性上，例如 `myHeight`。
3. 在计算属性中返回这个元素的高度，可以使用 JavaScript 中的 `offsetHeight` 属性获取。
4. 当这个元素的高度发生变化时，计算属性会重新计算并更新视图。

代码示例如下：

<template>
  <div class="my-class" :class="{ 'my-class-height': myHeight }">
    <!-- 元素内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 其他数据
    };
  },
  computed: {
    myHeight() {
      return document.querySelector('.my-class').offsetHeight;
    },
  },
};
</script>

在上述示例中，当 `.my-class` 元素的高度发生变化时，`myHeight` 计算属性会重新计算并更新视图。同时，我们还可以通过绑定另一个 class（例如 `my-class-height`）来实现高度变化后的样式更新。注意，在计算属性中访问 DOM 元素时应该避免使用 jQuery 等框架，而是使用原生的 JavaScript 方法。