vue 监听dom属性的变化

在Vue中，可以通过使用watch选项来监听DOM属性的变化。下面是一个示例：

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal) {
      console.log('message属性的值发生变化：', newVal);
    }
  }
}
</script>

在上面的示例中，我们使用v-model指令将输入框的值绑定到message属性上。然后，通过watch选项监听message属性的变化，并在变化时输出新的值。

除了使用watch选项外，还可以使用Vue提供的$watch方法来监听DOM属性的变化。下面是一个示例：

<template>
  <div>
    <input type="text" ref="input" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$watch(() => this.$refs.input.value, (newVal) => {
      console.log('输入框的值发生变化：', newVal);
    });
  }
}
</script>

在上面的示例中，我们使用$refs来引用输入框元素，并通过$watch方法监听输入框的值变化。当输入框的值发生变化时，回调函数会被触发，并输出新的值