vue实现单选按钮组

实现单选按钮组的方法

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

使用v-model绑定数据

通过v-model可以轻松实现单选按钮组的数据绑定。确保所有单选按钮的v-model指向同一个数据属性，这样它们会自动形成互斥关系。

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

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

    <input type="radio" id="option3" value="option3" v-model="selectedOption">
    <label for="option3">选项3</label>
  </div>
</template>

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

使用数组渲染单选按钮组

当选项较多时，可以使用数组来动态渲染单选按钮组，提高代码的可维护性。

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

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

使用组件封装单选按钮组

为了更好的复用性，可以创建一个独立的单选按钮组组件。

<!-- RadioGroup.vue -->
<template>
  <div class="radio-group">
    <div 
      v-for="option in options" 
      :key="option.value" 
      class="radio-option"
    >
      <input
        type="radio"
        :id="`${name}-${option.value}`"
        :value="option.value"
        v-model="internalValue"
        @change="$emit('change', internalValue)"
      >
      <label :for="`${name}-${option.value}`">
        {{ option.label }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      internalValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal
    }
  }
}
</script>

<style scoped>
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>

使用方法调用

在父组件中使用封装好的单选按钮组组件：

<template>
  <div>
    <radio-group 
      v-model="selectedOption"
      :options="options"
      name="example"
      @change="handleChange"
    />
  </div>
</template>

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

export default {
  components: {
    RadioGroup
  },
  data() {
    return {
      selectedOption: 'option1',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中值:', value)
    }
  }
}
</script>

使用第三方UI库

如果项目中使用Element UI、Vuetify等UI框架，可以直接使用它们提供的单选按钮组件。

以Element UI为例：

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">选项1</el-radio>
    <el-radio :label="2">选项2</el-radio>
    <el-radio :label="3">选项3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: 1
    }
  }
}
</script>

以上方法可以根据项目需求选择最适合的实现方式。v-model绑定是最基础的方法，组件封装提供了更好的复用性，而使用UI框架则能快速实现美观的界面。