vue循环实现多选

实现多选功能的基本思路

在Vue中实现多选功能通常涉及以下核心概念：使用v-model绑定数组、循环渲染选项、处理选中状态。以下是具体实现方法：

数据准备

定义选项数组和存储选中值的数组：

data() {
  return {
    options: [
      { id: 1, label: '选项1' },
      { id: 2, label: '选项2' },
      { id: 3, label: '选项3' }
    ],
    selectedItems: []
  }
}

模板渲染

使用v-for循环渲染复选框，并通过v-model绑定到数组：

<div v-for="option in options" :key="option.id">
  <input 
    type="checkbox" 
    :id="'option-' + option.id" 
    :value="option.id" 
    v-model="selectedItems"
  >
  <label :for="'option-' + option.id">{{ option.label }}</label>
</div>

处理选中状态

当用户勾选/取消勾选时，selectedItems数组会自动更新：

• 勾选时会将value值加入数组
• 取消勾选时会从数组中移除对应值

完整组件示例

<template>
  <div>
    <h3>请选择多项：</h3>
    <div v-for="option in options" :key="option.id" class="option-item">
      <input
        type="checkbox"
        :id="'option-' + option.id"
        :value="option.id"
        v-model="selectedItems"
      >
      <label :for="'option-' + option.id">{{ option.label }}</label>
    </div>
    <div>
      <p>已选择：{{ selectedItems }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: '选项1' },
        { id: 2, label: '选项2' },
        { id: 3, label: '选项3' }
      ],
      selectedItems: []
    }
  }
}
</script>

<style>
.option-item {
  margin: 10px 0;
}
</style>

对象数组处理

如果需要存储整个对象而非ID，可以使用v-bind:value：

<input
  type="checkbox"
  :id="'option-' + option.id"
  :value="option"
  v-model="selectedItems"
>

注意事项

• 确保每个复选框的value值是唯一的
• v-model绑定的数组会自动处理选中状态的添加和移除
• 使用:key时建议绑定唯一标识符
• 对象数组需要处理引用相等性问题