当前位置：首页 > VUE

vue实现单选按钮

2026-03-08 00:42:13VUE

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

在 Vue 中，可以通过 v-model 实现单选按钮的数据绑定。v-model 会自动关联选中的值到 Vue 实例的数据属性。

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

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

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

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

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

动态生成单选按钮

如果需要从数据动态生成单选按钮，可以使用 v-for 循环渲染选项。

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { id: 'opt1', value: 'value1', label: 'Label 1' },
        { id: 'opt2', value: 'value2', label: 'Label 2' },
        { id: 'opt3', value: 'value3', label: 'Label 3' }
      ]
    }
  }
}
</script>

使用组件封装单选按钮组

可以将单选按钮封装为可复用的组件，便于统一管理样式和行为。

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

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

export default {
  components: { RadioGroup },
  data() {
    return {
      selectedOption: '',
      options: [
        { id: 'opt1', value: 'value1', label: 'Label 1' },
        { id: 'opt2', value: 'value2', label: 'Label 2' }
      ]
    }
  }
}
</script>

在 RadioGroup.vue 中：

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

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

处理单选按钮事件

可以通过 @change 监听单选按钮的变化，执行自定义逻辑。

<template>
  <div>
    <input 
      type="radio" 
      id="eventOption" 
      value="Event Option" 
      v-model="selectedOption"
      @change="handleChange"
    />
    <label for="eventOption">Event Option</label>
  </div>
</template>

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

样式自定义

可以通过 CSS 或第三方库（如 Bootstrap、Element UI）美化单选按钮。

vue实现单选按钮

<template>
  <div class="custom-radio">
    <input 
      type="radio" 
      id="styledOption" 
      value="Styled" 
      v-model="selectedOption" 
      class="custom-radio-input"
    />
    <label for="styledOption" class="custom-radio-label">Styled Option</label>
  </div>
</template>

<style>
.custom-radio-input {
  margin-right: 8px;
}
.custom-radio-label {
  color: #333;
  font-weight: bold;
}
</style>