vue 单选框

<template>
  <div>
    <!-- 单选框组，v-model 绑定到 selectedValue -->
    <label v-for="(option, index) in options" :key="index">
      <input
        type="radio"
        :value="option.value"
        v-model="selectedValue"
      >
      {{ option.label }}
    </label>
    <p>Selected value: {{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化选中的值
      selectedValue: '',
      // 单选框的选项
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ]
    };
  }
};
</script>

<style scoped>
/* 添加一些样式 */
label {
  display: block;
  margin: 5px 0;
}
</style>

解释说明：

• v-for：用于循环生成单选框。
• v-model：用于双向绑定单选框的值到 selectedValue。
• options：定义了单选框的选项数组，每个选项包含 label 和 value。
• selectedValue：用于存储当前选中的值，并在页面上显示。

这样可以动态生成多个单选框，并且通过 v-model 实现双向绑定，方便地获取用户选择的值。