当前位置：首页 > VUE

vue实现单选状态

2026-03-09 03:46:07VUE

实现单选状态的方法

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

使用v-model绑定单选按钮

通过v-model绑定一个响应式数据，确保同一组单选按钮共享同一个变量。当用户选择不同选项时，绑定的变量会自动更新。

<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>
  </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 {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    };
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value;
    }
  }
};
</script>

使用Vuex管理单选状态

如果应用状态较为复杂，可以通过Vuex集中管理单选状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    selectedOption: ''
  },
  mutations: {
    setSelectedOption(state, value) {
      state.selectedOption = value;
    }
  }
});

在组件中通过mapState和mapMutations使用：

<template>
  <div>
    <input 
      type="radio" 
      id="option1" 
      value="option1" 
      :checked="selectedOption === 'option1'"
      @change="setSelectedOption('option1')"
    />
    <label for="option1">Option 1</label>
    <input 
      type="radio" 
      id="option2" 
      value="option2" 
      :checked="selectedOption === 'option2'"
      @change="setSelectedOption('option2')"
    />
    <label for="option2">Option 2</label>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['selectedOption'])
  },
  methods: {
    ...mapMutations(['setSelectedOption'])
  }
};
</script>

动态生成单选按钮

通过v-for动态生成单选按钮，适用于选项较多或动态加载的场景。

vue实现单选状态

<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>
  </div>
</template>

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