vue单选按钮代码实现

Vue 单选按钮实现方法

在 Vue 中实现单选按钮通常使用 v-model 绑定数据，结合 v-for 动态渲染选项。以下是几种常见实现方式：

基础实现

<template>
  <div>
    <label>
      <input type="radio" v-model="selected" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selected" value="option2">
      Option 2
    </label>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

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

动态选项渲染

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

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

使用组件库

使用 Element UI 的 Radio 组件：

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">Option 1</el-radio>
    <el-radio :label="2">Option 2</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: 1
    }
  }
}
</script>

表单验证

配合 VeeValidate 进行表单验证：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        v-model="selected" 
        :value="option.value"
        name="options"
        v-validate="'required'"
      >
      {{ option.text }}
    </label>
    <span v-show="errors.has('options')">{{ errors.first('options') }}</span>
  </div>
</template>

样式定制

使用 CSS 自定义单选按钮样式：

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

<style>
.radio-input {
  position: absolute;
  opacity: 0;
}

.radio-custom {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.radio-input:checked + .radio-custom {
  border-color: #409EFF;
}

.radio-input:checked + .radio-custom::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #409EFF;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}
</style>

以上代码示例展示了 Vue 中单选按钮的不同实现方式，可根据项目需求选择合适的方法。