vue单选按钮实现

Vue 单选按钮实现

在 Vue 中实现单选按钮可以通过 v-model 绑定数据，结合 input 元素的 type="radio" 属性来实现。以下是几种常见的实现方式：

基础实现

<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>
    <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: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ]
    }
  }
}
</script>

组件化实现 将单选按钮封装为可复用的组件：

<!-- RadioButton.vue -->
<template>
  <div>
    <input 
      type="radio" 
      :id="id" 
      :value="value" 
      v-model="modelValue"
      @change="$emit('update:modelValue', value)"
    >
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    value: String,
    label: String,
    modelValue: String
  },
  emits: ['update:modelValue']
}
</script>

使用组件

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

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

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

样式美化 可以通过 CSS 自定义单选按钮样式：

/* 隐藏原生单选按钮 */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}

/* 自定义样式 */
input[type="radio"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="radio"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 50%;
}

input[type="radio"]:checked + label:before {
  background-color: #42b983;
  border-color: #42b983;
}

表单验证 结合 Vue 的表单验证库如 VeeValidate：

<template>
  <div>
    <input 
      type="radio" 
      id="opt1" 
      value="option1" 
      v-model="selectedOption"
      name="options"
      v-validate="'required'"
    >
    <label for="opt1">Option 1</label>
    <input 
      type="radio" 
      id="opt2" 
      value="option2" 
      v-model="selectedOption"
      name="options"
      v-validate="'required'"
    >
    <label for="opt2">Option 2</label>
    <span v-if="errors.has('options')">{{ errors.first('options') }}</span>
  </div>
</template>

以上方法涵盖了 Vue 中实现单选按钮的主要场景，包括基础用法、动态渲染、组件封装和样式定制等。