当前位置：首页 > VUE

vue单选实现

2026-03-07 08:27:37VUE

Vue 单选实现

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

使用原生 HTML 单选按钮

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

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

使用 Vue 组件库（如 Element UI）

如果项目中使用 Element UI，可以直接使用其提供的单选组件：

<template>
  <div>
    <el-radio v-model="selectedOption" label="option1">Option 1</el-radio>
    <el-radio v-model="selectedOption" label="option2">Option 2</el-radio>
    <el-radio v-model="selectedOption" label="option3">Option 3</el-radio>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

动态生成单选选项

当选项数据来自后端或需要动态生成时，可以使用 v-for 循环渲染：

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

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

使用计算属性或方法处理选择逻辑

如果需要更复杂的逻辑处理，可以结合计算属性或方法：

vue单选实现

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  },
  methods: {
    handleSelection() {
      console.log('Selection changed to:', this.selectedOption);
    }
  }
};
</script>

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