Vue监听domclass

在Vue中，你可以使用`v-bind:class`指令动态绑定一个class。当表达式的值改变时，绑定的class也会相应地被更新。

例如，你可以这样绑定一个class：

<div v-bind:class="{ active: isActive }"></div>

其中，`isActive`是一个变量，它的值会决定`active`这个class是否被应用到这个`div`元素上。

如果你想在Vue中监听某个元素的class的变化，可以使用`Vue.nextTick`方法，它会在DOM更新后执行一个回调函数。你可以在回调函数中获取到元素的class并进行处理。例如：

<template>
  <div ref="myDiv" v-bind:class="{ active: isActive }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    handleClassChange() {
      // 在DOM更新后执行回调函数
      this.$nextTick(() => {
        const myDiv = this.$refs.myDiv
        // 获取元素的class
        const className = myDiv.className
        // 进行处理
        console.log(className)
      })
    }
  },
  mounted() {
    // 监听元素的class变化
    this.$watch(() => this.isActive, this.handleClassChange)
  }
}
</script>

在上面的例子中，`handleClassChange`方法会在`isActive`变量的值改变时被调用。在该方法中，我们使用`this.$nextTick`方法在DOM更新后执行回调函数。在回调函数中，我们可以通过`this.$refs.myDiv`获取到元素的引用，然后使用`className`属性获取到元素的class，并进行处理。