当前位置：首页 > VUE

vue实现div多选

2026-03-29 00:09:56VUE

Vue 实现 Div 多选功能

在 Vue 中实现 Div 多选功能可以通过以下方法完成，主要利用 v-model 或 v-for 结合事件处理实现多选逻辑。

vue实现div多选

方法一：基于 `v-model` 绑定数组

通过 v-model 绑定一个数组，动态记录选中的 Div 的标识（如 ID 或索引）。

vue实现div多选

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelect(item.id)"
      :class="{ 'selected': selectedItems.includes(item.id) }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' },
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelect(id) {
      const index = this.selectedItems.indexOf(id);
      if (index === -1) {
        this.selectedItems.push(id);
      } else {
        this.selectedItems.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.selected {
  background-color: #42b983;
  color: white;
}
</style>

通过 v-for 渲染多个 Div。
点击 Div 时调用 toggleSelect 方法，动态更新 selectedItems 数组。
通过 :class 绑定高亮样式。

方法二：基于 `v-for` 和动态属性

直接通过 v-for 遍历数据，并通过动态属性控制选中状态。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="toggleItem(index)"
      :class="{ 'selected': item.selected }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '选项1', selected: false },
        { text: '选项2', selected: false },
        { text: '选项3', selected: false },
      ]
    };
  },
  methods: {
    toggleItem(index) {
      this.items[index].selected = !this.items[index].selected;
    }
  }
};
</script>

<style>
.selected {
  background-color: #42b983;
  color: white;
}
</style>

直接在数据对象中维护 selected 属性。
点击时切换 selected 状态。

方法三：支持 Ctrl/Shift 多选

通过监听键盘事件，实现类似文件管理器的多选逻辑。

<template>
  <div @keydown.ctrl="isCtrlPressed = true" @keyup.ctrl="isCtrlPressed = false">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="handleSelect(index)"
      :class="{ 'selected': item.selected }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '选项1', selected: false },
        { text: '选项2', selected: false },
        { text: '选项3', selected: false },
      ],
      isCtrlPressed: false
    };
  },
  methods: {
    handleSelect(index) {
      if (this.isCtrlPressed) {
        this.items[index].selected = !this.items[index].selected;
      } else {
        this.items.forEach((item, i) => {
          item.selected = i === index;
        });
      }
    }
  }
};
</script>