当前位置：首页 > VUE

vue实现单选按钮

2026-02-11 00:57:33VUE

Vue 实现单选按钮的方法

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

使用 `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>
    <p>Selected option: {{ 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 option: {{ 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>

使用组件封装单选按钮

为了提高复用性，可以封装一个单选按钮组件：

<!-- RadioButton.vue -->
<template>
  <label>
    <input type="radio" :value="value" v-model="modelValue">
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      required: true
    }
  }
};
</script>

在父组件中使用：

<template>
  <div>
    <RadioButton 
      v-model="selectedOption" 
      value="option1" 
      label="Option 1" 
    />
    <RadioButton 
      v-model="selectedOption" 
      value="option2" 
      label="Option 2" 
    />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

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

处理单选按钮的事件

如果需要监听单选按钮的变化，可以使用 @change 事件：

<template>
  <div>
    <label>
      <input 
        type="radio" 
        v-model="selectedOption" 
        value="option1"
        @change="handleChange"
      >
      Option 1
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  },
  methods: {
    handleChange(event) {
      console.log('Selected value:', event.target.value);
    }
  }
};
</script>

使用第三方库

如果需要更复杂的功能或样式，可以考虑使用第三方库，例如 Element UI 或 Vuetify。以下是使用 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>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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