vue实现单选功能

2026-01-19 13:51:26VUE

使用 `<input type="radio">` 实现单选

在 Vue 中可以通过 v-model 绑定单选按钮组的值，确保同一组单选按钮的 name 属性相同。

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

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

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

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

使用 Vue 组件库实现单选

许多 UI 组件库提供了更美观的单选组件，例如 Element UI 的 el-radio。

<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>

动态生成单选按钮

当选项数据来自后端或需要动态生成时，可以使用 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"
        name="dynamicOptions"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

处理单选按钮事件

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

<template>
  <div>
    <input 
      type="radio" 
      id="eventOption1" 
      value="option1" 
      v-model="selectedOption"
      @change="handleChange"
      name="eventOptions"
    >
    <label for="eventOption1">Option 1</label>

    <input 
      type="radio" 
      id="eventOption2" 
      value="option2" 
      v-model="selectedOption"
      @change="handleChange"
      name="eventOptions"
    >
    <label for="eventOption2">Option 2</label>
  </div>
</template>

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

单选按钮样式自定义

通过 CSS 可以自定义单选按钮的外观，通常需要隐藏原生输入框并创建自定义样式。

<template>
  <div class="radio-group">
    <label class="custom-radio">
      <input type="radio" v-model="selectedOption" value="option1" name="styledOptions">
      <span class="radio-label">Option 1</span>
    </label>
    <label class="custom-radio">
      <input type="radio" v-model="selectedOption" value="option2" name="styledOptions">
      <span class="radio-label">Option 2</span>
    </label>
  </div>
</template>

<style>
.custom-radio input[type="radio"] {
  opacity: 0;
  position: absolute;
}

.custom-radio .radio-label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.custom-radio input[type="radio"]:checked + .radio-label {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}
</style>

vue实现单选功能