vue 实现单选

Vue 实现单选的方法

在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的实现方法：

使用原生 HTML 单选按钮

通过 v-model 绑定单选按钮的值，确保同一组单选按钮的 name 属性相同。

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" name="options">
    <label for="option1">Option 1</label>
    <br>
    <input type="radio" id="option2" value="option2" v-model="selectedOption" name="options">
    <label for="option2">Option 2</label>
    <br>
    <input type="radio" id="option3" value="option3" v-model="selectedOption" name="options">
    <label for="option3">Option 3</label>
    <br>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

使用 Vue 组件库的单选按钮

如果使用 Element UI 或其他 Vue UI 库，可以调用其提供的单选组件。

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
      <el-radio label="option3">Option 3</el-radio>
    </el-radio-group>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

动态生成单选按钮

通过 v-for 动态生成单选按钮，适用于选项来自后端或动态数据的情况。

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedOption"
        name="dynamicOptions"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  }
};
</script>

自定义单选组件

封装一个可复用的单选组件，适用于项目中多次使用单选的场景。

<!-- RadioGroup.vue -->
<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedValue"
        name="customOptions"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

使用自定义组件：

<template>
  <div>
    <RadioGroup 
      v-model="selectedOption" 
      :options="options" 
    />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
import RadioGroup from './RadioGroup.vue';

export default {
  components: {
    RadioGroup
  },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  }
};
</script>

以上方法可以根据项目需求选择适合的方式实现单选功能。