vue3中 input raido如何取消单选

在 Vue 3 中，你可以使用 v-model 指令和组件的绑定来处理单选按钮的取消选中。下面是一种常见的方式：

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

    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>

    <button @click="cancelSelection">取消选择</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      selectedOption: null // 初始化选项为空
    };
  },
  methods: {
    cancelSelection() {
      this.selectedOption = null; // 取消选中，将选项置为 null
    }
  }
};
</script>

在上面的代码中，我们使用了 `v-model` 将 `selectedOption` 变量与单选按钮绑定。当选中一个选项时，`selectedOption` 的值会被更新为所选选项的值。当点击 "取消选择" 按钮时，`cancelSelection` 方法会将 `selectedOption` 的值置为 `null`，从而取消选中。

这只是一种示例实现方式，你可以根据你的需求和项目结构进行调整。