vue指定id绑定change事件

在 Vue 中，可以使用 `v-model` 指令来实现表单数据的双向绑定，也可以使用 `v-on` 或 `@` 指令来绑定监听事件。如果要指定 `id` 绑定 `change` 事件，可以使用 `v-on` 或 `@` 指令的对象语法或者使用 `addEventListener` 方法。以下是两种方式的示例代码：

1. 对象语法：

<template>
  <input type="text" :value="inputValue" v-on="listeners" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      listeners: {
        change: this.handleChange
      }
    }
  },
  methods: {
    handleChange(event) {
      console.log('输入框的值变化了', event.target.value)
      this.inputValue = event.target.value
    }
  }
}
</script>

在上面的代码中，通过绑定 `v-on` 指令的对象语法，将 `change` 事件监听器动态绑定到了 `input` 元素上，并且在监听器中更新了 `inputValue` 数据。

2. `addEventListener` 方法：

<template>
  <input type="text" ref="input" />
</template>

<script>
export default {
  mounted() {
    this.$refs.input.addEventListener('change', this.handleChange)
  },
  beforeDestroy() {
    this.$refs.input.removeEventListener('change', this.handleChange)
  },
  methods: {
    handleChange(event) {
      console.log('输入框的值变化了', event.target.value)
    }
  }
}
</script>

在上面的代码中，使用 `$refs` 获取到 `input` 元素的引用，然后在 `mounted` 钩子函数中使用 `addEventListener` 方法动态添加 `change` 事件监听器，在 `beforeDestroy` 钩子函数中使用 `removeEventListener` 方法移除事件监听器。