vue input type=radio 选中事件

在 Vue 中，你可以使用 `v-model` 指令来双向绑定 `input` 元素的值，并且可以使用 `@change` 事件监听 `input` 元素值的变化。对于 `type="radio"` 的输入框，你可以借助 `v-model` 绑定选中的值，然后在 `@change` 事件中触发相应的方法来处理选中事件。

例如，假设你有一个包含两个 `radio` 按钮的组件，代码如下：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" @change="handleOptionChange">
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption" @change="handleOptionChange">
    <label for="option2">Option 2</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1'
    }
  },
  methods: {
    handleOptionChange() {
      console.log(`Selected option is ${this.selectedOption}`)
      // 这里可以处理选中事件
    }
  }
}
</script>

在上面的代码中，我们使用 `v-model` 指令将 `selectedOption` 双向绑定到两个 `radio` 按钮的值上，然后在 `@change` 事件中触发 `handleOptionChange` 方法来处理选中事件。当一个 `radio` 按钮被选中时，`selectedOption` 的值会被更新，然后 `handleOptionChange` 方法会被调用，并且可以在方法中处理选中事件。