当前位置：首页 > VUE

vue 实现单选和多选

2026-01-22 18:25:11VUE

Vue 实现单选

在 Vue 中实现单选功能，通常使用 v-model 绑定到同一个变量，确保同一时间只有一个选项被选中。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        v-model="selectedOption" 
        :value="option.value"
      />
      {{ option.label }}
    </label>
    <p>Selected: {{ selectedOption }}</p>
  </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>

使用 v-model 绑定 selectedOption，确保单选逻辑。
options 数组定义可选项，通过 v-for 动态渲染。
选中的值会实时更新到 selectedOption。

Vue 实现多选

多选功能可以通过 v-model 绑定到一个数组，并配合 checkbox 实现。

vue 实现单选和多选

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

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

v-model 绑定到数组 selectedOptions，自动处理多选逻辑。
勾选或取消勾选时，数组会动态更新。
初始值为空数组，确保多选功能正常。

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

如果需要更复杂的 UI，可以借助组件库如 Element UI 或 Ant Design Vue。

vue 实现单选和多选

Element UI 单选

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

Element UI 多选

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

组件库提供现成的样式和交互逻辑。
用法与原生类似，但封装了更多功能（如禁用状态、分组等）。

动态绑定选项

选项可以动态从接口获取，只需更新 options 数据即可。

export default {
  data() {
    return {
      selectedOption: '',
      options: []
    };
  },
  async created() {
    const res = await fetch('https://api.example.com/options');
    this.options = await res.json();
  }
};

在 created 或 mounted 钩子中请求数据。
数据更新后，模板会自动重新渲染选项。

表单验证

结合 Vuelidate 或 Element UI 的表单验证，确保选项必选。

<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-group>
    </el-form-item>
  </el-form>
</template>

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