这篇文章主要为大家详细介绍了Vue.js实现全选反选功能的相关知识,文中是示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下 
目录
实现思路示例方案一：基础实现方案二：使用计算属性优化说明在 Vue.js 中实现全选和反选功能，可以通过结合`v-model`、计算属性和事件处理来完成。
实现思路
数据绑定：为每个复选框绑定一个选中状态。
全选控制：通过一个复选框控制所有复选框的选中状态。
反选控制：通过一个按钮或复选框切换所有复选框的选中状态。
示例
方案一：基础实现
<template> <div> <!-- 全选复选框 --> <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" /> <span>全选</span> <!-- 选项列表 --> <ul> <li v-for="(item, index) in items" :key="index"> <input type="checkbox" v-model="item.selected" /> { { item.text }} </li> </ul> <!-- 反选按钮 --> <button @click="toggleSelect">反选</button> </div></template> <script>export default { data() { return { selectAll: false, items: [ { text: 'Item 1', selected: false }, { text: 'Item 2', selected: false }, { text: 'Item 3', selected: false }, ], }; }, methods: { // 全选逻辑 toggleSelectAll() { this.items.forEach((item) => { item.selected = this.selectAll; }); }, // 反选逻辑 toggleSelect() { this.items.forEach((item) => { item.selected = !item.selected; }); }, },};</script>方案二：使用计算属性优化
通过计算属性动态更新全选状态，使代码更加简洁和可维护。
<template> <div> <!-- 全选复选框 --> <input type="checkbox" v-model="selectAll" /> <span>全选</span> <!-- 选项列表 --> <ul> <li v-for="(item, index) in items" :key="index"> <input type="checkbox" v-model="item.selected" /> { { item.text }} </li> </ul> <!-- 反选按钮 --> <button @click="toggleSelect">反选</button> </div></template> <script>export default { data() { return { items: [ { text: 'Item 1', selected: false }, { text: 'Item 2', selected: false }, { text: 'Item 3', selected: false }, ], }; }, computed: { // 计算全选状态 selectAll: { get() { // 如果所有项都被选中，返回 true return this.items.every((item) => item.selected); }, set(value) { // 设置所有项的选中状态 this.items.forEach((item) => { item.selected = value; }); }, }, }, methods: { // 反选逻辑 toggleSelect() { this.items.forEach((item) => { item.selected = !item.selected; }); }, },};</script>说明
v-model：用于双向绑定复选框的状态。
计算属性：通过`get`和`set`方法动态更新全选状态。
全选逻辑：当全选复选框被选中时，所有选项都被选中；否则，所有选项都不被选中。
反选逻辑：通过切换每个选项的选中状态实现反选。
