当前位置：首页 > VUE

vue实现反选

2026-01-19 00:31:35VUE

Vue 实现反选功能

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

使用 v-model 和计算属性

利用计算属性和 v-model 可以轻松实现反选逻辑。假设有一个复选框列表：

vue实现反选

<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 allItemIds = this.items.map(item => item.id)
      this.selectedItems = allItemIds.filter(id => !this.selectedItems.includes(id))
    }
  }
}
</script>

使用全选/反选模式

如果需要全选和反选功能结合，可以这样实现：

vue实现反选

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [],
      allSelected: false
    }
  },
  methods: {
    toggleAll() {
      if (this.allSelected) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  },
  watch: {
    selectedItems(newVal) {
      this.allSelected = newVal.length === this.items.length
    }
  }
}
</script>

使用 Vuex 管理状态

在大型应用中，可以使用 Vuex 来管理选择状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedItems: []
  },
  mutations: {
    toggleSelection(state) {
      const allItemIds = state.items.map(item => item.id)
      state.selectedItems = allItemIds.filter(id => !state.selectedItems.includes(id))
    }
  }
})

<template>
  <div>
    <label v-for="item in $store.state.items" :key="item.id">
      <input type="checkbox" 
             :value="item.id" 
             :checked="$store.state.selectedItems.includes(item.id)"
             @change="toggleItem(item.id)">
      {{ item.name }}
    </label>
    <button @click="$store.commit('toggleSelection')">反选</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleItem(id) {
      if (this.$store.state.selectedItems.includes(id)) {
        this.$store.state.selectedItems = this.$store.state.selectedItems.filter(item => item !== id)
      } else {
        this.$store.state.selectedItems.push(id)
      }
    }
  }
}
</script>