对于上次的多选和取消选择，我来把它给补充完整，包含全选和反选。
多选和取消选择
效果图如下：
代码如下：
<template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index">{{item}}</div> </div> </div> </template> <script> export default { data () { return { list:['沉鱼落雁','闭月羞花','古灵精怪','调皮可爱','说的没错','就是你'],//所有数据 checkedList:[],//选中的数据 } }, methods: { checkFn(item){ //findIndex方法返回数组中满足所提供的测试函数的第一个元素的索引，为上次的方案的升级版 //地址：https://www.nhooo.com/jsref/array_findindex.html //通过该方法来判断当前点击的元素是否已经被选中过，-1就是未选中 let index = this.checkedList.findIndex(ele=>{ return ele === item }) if(index != -1){ this.checkedList.splice(index,1)//取消选中 }else{ this.checkedList.push(item)//选中 } }, isActiveFn(item){//判断元素是否选中 //index如果不是-1，那就说明是被选中的 let index = this.checkedList.findIndex(ele=>{ return ele === item }) if(index!= -1){ return true }else{ return false } } } } </script> <style lang="less" scoped> .ul{ display: flex; padding: 15px; .li{ padding: 3px 5px; border-radius: 3px; border: 1px solid #999; margin-right: 10px; cursor: pointer; &.active{ background: chocolate; color: #fff; border-color: chocolate; } } } </style>
代码要点：
既然是多选，那么肯定是一个数组来存储选中的数据，例如checkedList
checkFn点击事件中，同时负责了取消选中和选中
在点击某一项时，当它时选中时，肯定是要取消选中的，通过findIndex判断了点击的那一个是否在checkedList
isActiveFn在动态绑定class的时候起到了判断是否选中的作用
全选和反选
我们再上面的代码上加上两个按钮，一个全选一个反选。
大致效果如下：
代码：
<template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index">{{item}}</div> </div> <div class="btns"> <button @click="selectAll()">全选</button> <button @click="reverseSelect()">反选</button> </div> </div> </template> <script> export default { data () { return { list:['沉鱼落雁','闭月羞花','古灵精怪','调皮可爱','说的没错','就是你'],//所有数据 checkedList:[],//选中的数据 } }, methods: { checkFn(item){ //findIndex方法返回数组中满足所提供的测试函数的第一个元素的索引，为上次的方案的升级版 //地址：https://www.nhooo.com/jsref/array_findindex.html //通过该方法来判断当前点击的元素是否已经被选中过，-1就是未选中 let index = this.checkedList.findIndex(ele=>{ return ele === item }) if(index != -1){ this.checkedList.splice(index,1)//取消选中 }else{ this.checkedList.push(item)//选中 } }, isActiveFn(item){//判断元素是否选中 //index如果不是-1，那就说明是被选中的 let index = this.checkedList.findIndex(ele=>{ return ele === item }) if(index!= -1){ return true }else{ return false } }, selectAll(){ this.checkedList = JSON.parse(JSON.stringify(this.list))//JSON.parse(JSON.stringify())解决引用 }, reverseSelect(){ let parseChecked = [] this.list.forEach(item=>{ //判断原数组list的每一项，判断他们是否被选中，没被选中就push到这个parseChecked let index = this.checkedList.findIndex(ele=>{ return ele === item }) if(index==-1){ parseChecked.push(item) } }) //把所有的没被选中的parseChecked给checkedList this.checkedList = parseChecked } } } </script> <style lang="less" scoped> .ul{ display: flex; padding: 15px; .li{ padding: 3px 5px; border-radius: 3px; border: 1px solid #999; margin-right: 10px; cursor: pointer; &.active{ background: chocolate; color: #fff; border-color: chocolate; } } } .btns{ padding: 15px; button{ margin-right: 15px; } } </style>
代码要点：
全选就是list所有的数据直接给checkedList
反选就是把没被选中的拿出来，然后直接替换掉checkedList
以上写法适用于元素项为单一的字符串的情况，而且每一项字符串得唯一，适用于上次你的那个页面。通常情况下我们的项目的每一项会是{id:1,name:'闭月羞花‘}这种，我们需要给他添加上{id:1,name:'闭月羞花‘,isChecked:false}，下一篇文章会写，不急哈。
