vue redio 单选

在 Vue 中实现单选的方法很简单，可以通过 v-model 指令绑定一个变量来实现单选。

首先，定义一个数组保存所有可选项的值：

data() {
  return {
    options: ['option1', 'option2', 'option3'],
    selectedOption: ''
  }
}

然后，在模板中使用 v-for 指令循环渲染所有可选项，并使用 v-model 指令将选项的值绑定到 selectedOption 变量上：

<div v-for="option in options" :key="option">
  <input type="radio" :value="option" v-model="selectedOption">
  <label>{{ option }}</label>
</div>

最后，通过 selectedOption 变量获取当前选中的选项的值。

完整代码如下：

<template>
  <div>
    <div v-for="option in options" :key="option">
      <input type="radio" :value="option" v-model="selectedOption">
      <label>{{ option }}</label>
    </div>
    <p>当前选中的选项是：{{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['option1', 'option2', 'option3'],
      selectedOption: ''
    }
  }
}
</script>