vue3Radio 单选框

以下是Vue3中使用v-for循环的radio单选框的例子：

<template>
  <div>
    <div v-for="(item, index) in radioList" :key="index">
      <input type="radio" v-model="radioVal" :value="item.value" @change="getRadioVal">
      <label>{{ item.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioVal: '', // 选中的值
      radioList: [ // 单选框列表
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  },
  methods: {
    getRadioVal() {
      console.log(this.radioVal) // 输出选中的值
    }
  }
}
</script>

在上面的例子中，我们使用了v-for指令循环渲染了一个单选框列表。每个单选框都绑定了一个value值，并且使用v-model指令将选中的值绑定到了radioVal变量上。当选中的值发生变化时，@change事件会触发getRadioVal方法，我们可以在该方法中获取选中的值并进行处理。