当前位置：首页 > VUE

vue实现多选div

2026-01-07 00:05:53VUE

实现多选 DIV 的基本思路

在 Vue 中实现多选 DIV 功能，可以通过以下方法实现。主要思路是利用 v-model 绑定选中状态，结合 CSS 类名动态切换样式。

数据准备与模板结构

定义一个数组存储可选项，并为每个选项添加 selected 属性标记选中状态：

data() {
  return {
    items: [
      { id: 1, text: '选项1', selected: false },
      { id: 2, text: '选项2', selected: false },
      { id: 3, text: '选项3', selected: false }
    ]
  }
}

模板中使用 v-for 渲染选项，并通过 v-model 或事件绑定控制选中状态：

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

切换选中状态的方法

通过点击事件切换 selected 状态：

methods: {
  toggleSelect(item) {
    item.selected = !item.selected;
  }
}

样式设计

为选中的 DIV 添加高亮样式：

.selectable-item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.selected {
  background-color: #42b983;
  color: white;
}

获取选中结果

通过计算属性过滤已选中的项：

computed: {
  selectedItems() {
    return this.items.filter(item => item.selected);
  }
}

完整组件示例

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      class="selectable-item"
      :class="{ 'selected': item.selected }"
      @click="toggleSelect(item)"
    >
      {{ item.text }}
    </div>
    <p>已选中: {{ selectedItems.map(item => item.text).join(', ') }}</p>
  </div>
</template>

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

<style>
.selectable-item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.selected {
  background-color: #42b983;
  color: white;
}
</style>

扩展功能

如果需要限制最大选择数量，可以在 toggleSelect 方法中添加逻辑：

toggleSelect(item) {
  if (!item.selected && this.selectedItems.length >= 2) {
    alert('最多选择两项');
    return;
  }
  item.selected = !item.selected;
}

vue实现多选div