vue @change

<template>
  <div>
    <select v-model="selected" @change="handleChange">
      <option disabled value="">请选择</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <p>你选择了: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  },
  methods: {
    handleChange(event) {
      console.log('选择改变:', event.target.value);
      // 可以在这里添加更多逻辑，例如发送请求或更新状态
    }
  }
};
</script>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 <select> 元素，并绑定了 v-model 到 selected 数据属性。
   • 使用了 @change 事件监听器来监听下拉菜单的选择变化，并在变化时调用 handleChange 方法。
   • 下拉菜单中有三个选项：苹果、香蕉和橙子。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数，返回一个包含 selected 属性的对象。这个属性用于存储当前选中的值。
   • 定义了一个 methods 对象，其中包含 handleChange 方法。该方法会在选择变化时被调用，并接收一个事件对象作为参数。
   • 在 handleChange 方法中，可以通过 event.target.value 获取到当前选中的值，并可以在此基础上添加更多的逻辑处理。

通过这种方式，你可以轻松地监听并响应用户的选择变化。