vue单选实现

Vue 单选实现方法

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

使用 v-model 绑定单选按钮

通过 v-model 绑定到同一个变量，实现单选效果：

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

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

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

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

使用组件实现单选组

可以封装一个单选组组件，提高复用性：

<template>
  <div>
    <RadioGroup v-model="selectedOption" :options="options" />
  </div>
</template>

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

export default {
  components: {
    RadioGroup
  },
  data() {
    return {
      selectedOption: '',
      options: [
        { label: 'Option 1', value: 'opt1' },
        { label: 'Option 2', value: 'opt2' },
        { label: 'Option 3', value: 'opt3' }
      ]
    }
  }
}
</script>

RadioGroup.vue 组件实现：

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

<script>
export default {
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      required: true
    }
  },
  emits: ['update:modelValue']
}
</script>

使用第三方 UI 库

许多 UI 库如 Element UI、Vuetify 等提供了现成的单选组件：

Element UI 示例:

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

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

Vuetify 示例:

<template>
  <v-radio-group v-model="radio">
    <v-radio label="Option 1" value="1"></v-radio>
    <v-radio label="Option 2" value="2"></v-radio>
    <v-radio label="Option 3" value="3"></v-radio>
  </v-radio-group>
</template>

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

动态生成单选按钮

当选项需要从 API 获取或动态生成时：

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

<script>
export default {
  data() {
    return {
      selectedDynamicOption: '',
      dynamicOptions: []
    }
  },
  async created() {
    this.dynamicOptions = await this.fetchOptions()
  },
  methods: {
    async fetchOptions() {
      // API 调用示例
      const response = await fetch('/api/options')
      return response.json()
    }
  }
}
</script>

自定义样式单选按钮

通过隐藏原生 input 元素，自定义样式：

<template>
  <div class="custom-radio">
    <div
      v-for="option in options"
      :key="option.value"
      class="radio-item"
      :class="{ active: selectedOption === option.value }"
      @click="selectedOption = option.value"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { label: 'Option 1', value: 'opt1' },
        { label: 'Option 2', value: 'opt2' },
        { label: 'Option 3', value: 'opt3' }
      ]
    }
  }
}
</script>

<style>
.custom-radio {
  display: flex;
  gap: 10px;
}
.radio-item {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.radio-item.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}
</style>

以上方法涵盖了 Vue 中实现单选功能的常见场景，可以根据具体需求选择适合的方式。