vue 实现单选

2026-01-07 07:08:25VUE

Vue 实现单选功能

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

使用原生 `<input type="radio">` 绑定 v-model

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

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2">
      Option 2
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option3">
      Option 3
    </label>
  </div>
</template>

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

使用自定义组件实现单选

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

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

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

使用第三方 UI 库（如 Element UI）

如果项目中使用 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>

动态生成单选选项

从后端获取数据动态渲染单选选项：

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input 
        type="radio" 
        v-model="selectedItem" 
        :value="item.id"
      >
      {{ item.name }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

这些方法涵盖了 Vue 中实现单选功能的主要场景，可以根据项目需求选择合适的方式。

vue 实现单选