vue监听select选择的值

在 Vue.js 中，可以使用 `v-model` 指令来实现对 `select` 元素的监听。当用户选择不同的选项时，`v-model` 指令会自动将选中的值绑定到 Vue 实例的数据中。

例如，下面的代码中，我们使用 `v-model` 指令将 `selected` 绑定到 Vue 实例的 `message` 属性上：

<template>
  <div>
    <select v-model="message">
      <option value="Hello">Hello</option>
      <option value="Bonjour">Bonjour</option>
      <option value="Hola">Hola</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`用户选择了 ${newVal}`)
    }
  }
}
</script>

在上面的代码中，我们定义了一个 `select` 元素，并使用 `v-model` 指令将其绑定到 Vue 实例的 `message` 属性上。当用户选择不同的选项时，`message` 的值会自动更新。

同时，我们在 Vue 实例中定义了一个 `watch`，用于监听 `message` 的变化。每当用户选择不同的选项时，`watch` 就会执行回调函数，并输出用户选择的值。

需要注意的是，`v-model` 指令默认绑定的是 `value` 属性。如果需要绑定其他属性，可以使用 `v-bind` 指令。例如，如果需要绑定 `selected` 属性，可以将 `v-model` 改为 `v-bind:selected`。