当前位置：首页 > VUE

vue实现li多选

2026-02-17 00:20:04VUE

实现思路

在Vue中实现li多选功能，可以通过数据绑定和事件处理来完成。核心思路是利用数组存储选中的项，通过v-for渲染列表，结合v-model或@click动态更新选中状态。

基础实现方法

模板部分

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

脚本部分

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

样式部分

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

使用复选框实现

如果需要更直观的多选体验，可以结合复选框实现：

模板部分

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

全选/反选功能

添加全选功能可以提升用户体验：

模板部分

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

脚本部分

<script>
export default {
  data() {
    return {
      // 其他数据同上
      allSelected: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.allSelected ? [...this.list] : []
    }
  },
  watch: {
    selectedItems: {
      handler(newVal) {
        this.allSelected = newVal.length === this.list.length
      },
      deep: true
    }
  }
}
</script>