当前位置：首页 > VUE

vue实现批量选择li怎么实现

2026-01-19 22:47:31VUE

Vue 实现批量选择列表项的方法

在 Vue 中实现批量选择列表项（<li>）通常涉及数据绑定、事件处理和状态管理。以下是几种常见的实现方式：

方法一：基于 v-model 和复选框

通过 v-model 绑定复选框的选中状态，结合 v-for 渲染列表项。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="item.id"
      >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      selectedItems: [], // 存储选中的 ID
    };
  }
};
</script>

说明：

selectedItems 数组会动态更新为选中的 item.id。
适用于需要获取选中项 ID 的场景。

方法二：基于对象状态管理

通过为每个列表项维护独立的选中状态（布尔值），适合需要复杂操作的场景。

vue实现批量选择li怎么实现

<template>
  <ul>
    <li 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'active': item.selected }"
      @click="toggleSelect(item)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
      ],
    };
  },
  methods: {
    toggleSelect(item) {
      item.selected = !item.selected;
    }
  }
};
</script>

说明：

点击列表项切换 selected 状态。
通过 CSS 类名（如 active）高亮选中项。

方法三：全选/反选功能

扩展方法一，添加全选按钮控制所有复选框。

vue实现批量选择li怎么实现

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    <ul>
      <li v-for="item in items" :key="item.id">
        <input 
          type="checkbox" 
          v-model="selectedItems" 
          :value="item.id"
        >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      selectedItems: [],
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length;
      },
      set(value) {
        this.selectedItems = value 
          ? this.items.map(item => item.id) 
          : [];
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll;
    }
  }
};
</script>

说明：

selectAll 计算属性同步全选状态。
点击全选按钮时更新 selectedItems。

方法四：基于事件委托

通过事件委托在父元素上统一处理点击事件，适合动态列表。

<template>
  <ul @click="handleListClick">
    <li 
      v-for="item in items" 
      :key="item.id"
      :data-id="item.id"
      :class="{ 'active': selectedItems.includes(item.id) }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      selectedItems: [],
    };
  },
  methods: {
    handleListClick(e) {
      const id = e.target.dataset.id;
      if (!id) return;
      const index = this.selectedItems.indexOf(id);
      index === -1 
        ? this.selectedItems.push(id) 
        : this.selectedItems.splice(index, 1);
    }
  }
};
</script>

说明：