vue下拉框change事件

在 Vue 中，下拉框的 change 事件可以通过 v-on 指令来绑定，具体实现如下：

首先，在模板中添加下拉框元素，并绑定 v-model 指令来实现数据的双向绑定，同时绑定 v-on:change 指令来监听下拉框的 change 事件，如下所示：

<template>
  <div>
    <select v-model="selected" v-on:change="handleChange">
      <option disabled value="">请选择</option>
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

其中，selected 是当前选中的选项，options 是下拉框中的选项列表，handleChange 是下拉框 change 事件的回调方法。

然后，在 Vue 实例中定义选项列表和 handleChange 方法，如下所示：

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' },
      ],
    };
  },
  methods: {
    handleChange() {
      console.log('选中的选项为：', this.selected);
    },
  },
};
</script>

当下拉框的选项发生变化时，handleChange 方法会被调用，并输出当前选中的选项的值。