当前位置：首页 > VUE

vue实现多选和单选

2026-02-23 08:32:00VUE

Vue 实现单选功能

使用 v-model 绑定单选按钮组，确保同一组单选按钮的 name 属性相同。通过绑定同一个变量实现互斥选择。

<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: {{ selectedOption }}</p>
  </div>
</template>

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

Vue 实现多选功能

使用 v-model 绑定到数组实现多选功能，通过 value 属性确定选中项的值。

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

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

使用组件库实现选择功能

Element UI 提供了单选和多选组件，简化开发流程。

单选示例：

<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 :label="3">Option 3</el-radio>
  </el-radio-group>
</template>

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

多选示例：

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="Option 1"></el-checkbox>
    <el-checkbox label="Option 2"></el-checkbox>
    <el-checkbox label="Option 3"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkList: []
    }
  }
}
</script>

动态渲染选项

从接口获取数据动态渲染单选或多选选项。

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <label>
        <input 
          type="checkbox" 
          v-model="selectedOptions" 
          :value="option.value"
        >
        {{ option.label }}
      </label>
    </div>
  </div>
</template>

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

表单验证

结合 Vue 的表单验证功能，确保必填项已选择。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="单选" prop="radio">
      <el-radio-group v-model="form.radio">
        <el-radio :label="1">Option 1</el-radio>
        <el-radio :label="2">Option 2</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="多选" prop="checks">
      <el-checkbox-group v-model="form.checks">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        radio: '',
        checks: []
      },
      rules: {
        radio: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        checks: [
          { type: 'array', required: true, message: '至少选择一项', trigger: 'change' }
        ]
      }
    }
  }
}
</script>

vue实现多选和单选