当前位置：首页 > VUE

vue实现反选

2026-02-19 16:54:16VUE

Vue 实现反选功能

在 Vue 中实现反选功能可以通过多种方式完成，以下是几种常见的实现方法：

方法一：使用计算属性和 v-model

通过计算属性处理反选逻辑，结合 v-model 绑定复选框状态。

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </label>
    <button @click="toggleSelection">反选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelection() {
      const allItems = this.items.map(item => item.id)
      this.selectedItems = allItems.filter(id => !this.selectedItems.includes(id))
    }
  }
}
</script>

方法二：直接操作选中数组

直接操作选中数组，将未选中的项加入数组，已选中的项移除。

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </label>
    <button @click="invertSelection">反选</button>
  </div>
</template>

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

方法三：使用对象存储选中状态

通过对象存储选中状态，反选时直接取反。

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selection[item.id]">
      {{ item.name }}
    </label>
    <button @click="invertSelection">反选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selection: {}
    }
  },
  created() {
    this.items.forEach(item => {
      this.$set(this.selection, item.id, false)
    })
  },
  methods: {
    invertSelection() {
      Object.keys(this.selection).forEach(key => {
        this.selection[key] = !this.selection[key]
      })
    }
  }
}
</script>

方法四：使用全选/反选组合

结合全选和反选功能，实现更灵活的选择控制。

<template>
  <div>
    <label>
      <input type="checkbox" @change="selectAll" :checked="isAllSelected">
      全选
    </label>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </label>
    <button @click="invertSelection">反选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    isAllSelected() {
      return this.selectedItems.length === this.items.length
    }
  },
  methods: {
    selectAll(event) {
      if (event.target.checked) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    },
    invertSelection() {
      const allItems = this.items.map(item => item.id)
      this.selectedItems = allItems.filter(id => !this.selectedItems.includes(id))
    }
  }
}
</script>