vue中单选怎样实现

Vue 中单选实现方法

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

使用原生 HTML 单选按钮

通过 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>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

使用 Vue 组件库

如果项目中使用 UI 库（如 Element UI、Vuetify 等），可以直接调用其提供的单选组件：

Element UI 示例：

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

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

Vuetify 示例：

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

动态生成单选选项

通过遍历数组动态生成单选按钮：

<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>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

自定义单选组件

封装一个可复用的单选组件：

<!-- RadioButton.vue -->
<template>
  <div class="radio-button">
    <input 
      type="radio" 
      :id="id" 
      :value="value" 
      :checked="isChecked" 
      @change="$emit('change', value)" 
    />
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    value: String,
    label: String,
    isChecked: Boolean
  }
}
</script>

使用自定义组件：

<template>
  <div>
    <RadioButton 
      id="opt1" 
      value="Option 1" 
      label="Option 1" 
      :isChecked="selectedOption === 'Option 1'"
      @change="selectedOption = $event"
    />
    <RadioButton 
      id="opt2" 
      value="Option 2" 
      label="Option 2" 
      :isChecked="selectedOption === 'Option 2'"
      @change="selectedOption = $event"
    />
  </div>
</template>

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

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

以上方法涵盖了从原生实现到组件库集成的多种方案，可以根据项目需求选择适合的方式。