当前位置：首页 > VUE

vue实现单选状态

2026-02-17 15:18:11VUE

Vue 实现单选状态的方法

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

使用 `v-model` 绑定单选按钮

通过 v-model 绑定一个变量，可以轻松实现单选状态。单选按钮组共享同一个 v-model 绑定的变量，选中时变量的值会更新为对应按钮的 value。

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

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

    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用计算属性和方法

如果需要更复杂的逻辑，可以通过计算属性和方法动态控制单选状态。例如，根据条件禁用某些选项或动态生成单选按钮。

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

<script>
export default {
  data() {
    return {
      selectedOption: "",
      options: [
        { value: "option1", label: "Option 1", disabled: false },
        { value: "option2", label: "Option 2", disabled: true },
      ],
    };
  },
};
</script>

使用 Vue 组件实现单选组

可以封装一个自定义的单选组组件，提高复用性。例如，创建一个 RadioGroup 组件，通过 v-model 实现父子组件之间的双向绑定。

<!-- RadioGroup.vue -->
<template>
  <div>
    <slot :selected="modelValue" :update="updateValue"></slot>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue(value) {
      this.$emit("update:modelValue", value);
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <RadioGroup v-model="selectedOption">
    <template #default="{ selected, update }">
      <input
        type="radio"
        id="option1"
        value="option1"
        :checked="selected === 'option1'"
        @change="update('option1')"
      />
      <label for="option1">Option 1</label>

      <input
        type="radio"
        id="option2"
        value="option2"
        :checked="selected === 'option2'"
        @change="update('option2')"
      />
      <label for="option2">Option 2</label>
    </template>
  </RadioGroup>
</template>

<script>
import RadioGroup from "./RadioGroup.vue";

export default {
  components: {
    RadioGroup,
  },
  data() {
    return {
      selectedOption: "",
    };
  },
};
</script>

使用第三方库

如果需要更丰富的功能（如样式、动画等），可以使用第三方库如 Element UI、Vuetify 或 Ant Design Vue 提供的单选组件。

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

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

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

vue实现单选状态