当前位置：首页 > VUE

vue实现单选功能

2026-02-20 06:09:59VUE

Vue 实现单选功能的方法

使用 v-model 绑定单选按钮
在 Vue 中，可以通过 v-model 绑定单选按钮的值。创建一个 data 属性存储选中的值，单选按钮的 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>

动态生成单选按钮
通过 v-for 动态生成单选按钮，适用于选项来自后端或动态数据的情况。

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

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

使用组件封装单选组
将单选功能封装为可复用的组件，提升代码可维护性。

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

<script>
export default {
  props: {
    value: String,
    options: Array
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
};
</script>

父组件调用示例
在父组件中通过 v-model 绑定选中的值。

<template>
  <div>
    <RadioGroup v-model="selectedOption" :options="options" />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

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

处理单选按钮事件
通过 @change 监听单选按钮的变化，执行自定义逻辑。

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

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  },
  methods: {
    handleChange() {
      console.log('Selected option changed to:', this.selectedOption);
    }
  }
};
</script>