当前位置：首页 > VUE

vue实现单选和多选

2026-02-24 22:31:34VUE

Vue 实现单选功能

使用 v-model 绑定单选按钮的值。单选按钮通常是一组互斥的选项，选中一个会自动取消其他选项。

<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 实现多选功能

多选功能通常使用复选框（checkbox），通过 v-model 绑定到一个数组，选中的值会自动添加到数组中。

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

使用组件库实现单选和多选

如果需要更美观或功能更丰富的选择组件，可以使用 UI 库如 Element UI、Vuetify 或 Ant Design Vue。

Element UI 单选示例

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">Option 1</el-radio>
    <el-radio label="option2">Option 2</el-radio>
    <el-radio label="option3">Option 3</el-radio>
  </el-radio-group>
</template>

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

Element UI 多选示例

<template>
  <el-checkbox-group v-model="selectedOptions">
    <el-checkbox label="option1">Option 1</el-checkbox>
    <el-checkbox label="option2">Option 2</el-checkbox>
    <el-checkbox label="option3">Option 3</el-checkbox>
  </el-checkbox-group>
</template>

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

动态生成单选或多选选项

通过 v-for 动态渲染选项，适用于选项数据来自后端或需要动态加载的场景。

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

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

表单验证

结合 Vue 的表单验证库（如 VeeValidate）或 Element UI 的 Form 组件，可以轻松实现单选和多选的验证。

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

<script>
export default {
  data() {
    return {
      form: {
        selectedOption: ''
      },
      rules: {
        selectedOption: [
          { required: true, message: '请选择一个选项', trigger: 'change' }
        ]
      }
    }
  }
}
</script>

vue实现单选和多选