vue怎么实现单选

实现 Vue 单选功能

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

使用原生 HTML 单选按钮

通过 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>

使用组件库的单选组件

许多 Vue UI 组件库提供了单选组件，例如 Element UI、Vuetify 等。

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">选项1</el-radio>
      <el-radio label="option2">选项2</el-radio>
      <el-radio label="option3">选项3</el-radio>
    </el-radio-group>
  </div>
</template>

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

自定义单选组件

可以创建自定义的单选组件以实现更复杂的功能。

<template>
  <div>
    <div 
      v-for="option in options" 
      :key="option.value"
      @click="selectOption(option.value)"
      :class="{ 'active': selectedOption === option.value }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedOption: this.value
    }
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>
.active {
  background-color: #409EFF;
  color: white;
}
</style>

使用计算属性处理单选逻辑

通过计算属性可以更灵活地处理单选逻辑。

<template>
  <div>
    <div 
      v-for="option in options" 
      :key="option.value"
      @click="selectedOption = option.value"
      :class="{ 'active': isSelected(option.value) }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

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

使用 Vuex 管理单选状态

在大型应用中，可以使用 Vuex 来管理单选状态。

<template>
  <div>
    <input 
      type="radio" 
      id="option1" 
      value="option1" 
      v-model="$store.state.selectedOption"
    >
    <label for="option1">选项1</label>
    <input 
      type="radio" 
      id="option2" 
      value="option2" 
      v-model="$store.state.selectedOption"
    >
    <label for="option2">选项2</label>
  </div>
</template>

以上方法可以根据具体需求选择适合的实现方式。