「短文」如何在 Vue 中使用 select 下拉选择组件的 @change 事件

如果你想避免在 select 标签中使用 v-model，你可以使用 Vue 的 v-on:change 指令，或者只是简写的 @change。

在每个 option 中，您必须设置 value 属性来定义每个选项的值。Vue 事件处理程序有一个特殊的 $event 属性来描述事件，$event.target.value 包含 option 的选项的值，示例代码如下：

Vue.createApp({
  data: () => ({ selected: '' }),
  methods: {
    switchSelect(event) {
      this.selected = event.target.value;
    }
  },
  template: `
    <div>
      <p>Your choice is: {{selected}}</p>
      <select @change="switchSelect($event)">
        <option value="">Choose</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </div>
  `
});

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载