当前位置：首页 > VUE

vue循环实现多选

2026-01-15 05:34:14VUE

Vue循环实现多选的方法

在Vue中实现多选功能，可以通过v-for循环渲染选项，结合v-model绑定数组来记录选中的值。以下是具体实现方式：

基础实现方案

数据准备 在组件的data中定义选项列表和存储选中值的数组：

vue循环实现多选

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

模板渲染 使用v-for循环渲染复选框，v-model绑定到selectedItems数组：

<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数组中，可以通过计算属性或方法进一步处理：

vue循环实现多选

computed: {
  selectedLabels() {
    return this.options
      .filter(opt => this.selectedItems.includes(opt.id))
      .map(opt => opt.label)
  }
}

对象数组处理方案

当选项是对象数组时，可以使用v-model结合对象属性：

<div v-for="item in itemList" :key="item.id">
  <input 
    type="checkbox" 
    v-model="item.checked" 
    @change="handleCheckChange"
  >
  {{ item.name }}
</div>

data() {
  return {
    itemList: [
      { id: 1, name: '苹果', checked: false },
      { id: 2, name: '香蕉', checked: false }
    ]
  }
},
methods: {
  handleCheckChange() {
    const selected = this.itemList.filter(item => item.checked)
    console.log(selected)
  }
}

全选/反选功能实现

添加全选功能需要额外的计算属性和方法：

<input type="checkbox" v-model="selectAll" @change="toggleAll">
<span>全选</span>

computed: {
  selectAll: {
    get() {
      return this.selectedItems.length === this.options.length
    },
    set(value) {
      this.selectedItems = value 
        ? this.options.map(opt => opt.id) 
        : []
    }
  }
}