vue实现单选多选全选全不选功能

单选

当用v-for渲染一组数据的时候，可以带上index来区分他们，这里利用这个index来简单地实现单选

<ul class="user-content" v-for="(list,index) in translist" :class="{bgcolor:index == checkid}" @click="checktrans(index)"></ul>

根据点击的index,添加class属性:bgcolor

data() {return {checkid:''}}methods:{checktrans(index){this.cleckid=index;},}

多选

多选的原理和单选一样，只不过这次要维护的是一个数组，不是单个的checkid

<ul class="toast-content" v-for="(list,index) in translist" :class="transArr.includes(index)?'bgcolor':''" @click="Listchoose(index)"></ul>

data() {return {transArr: [],}}

点击一次push一次index到transArr[]中，如果这个transArr[]中有这个index了那就不要它了，实现了点一次选中再点一次取消。

methods:{Listchoose(i){var idx = this.transArr.indexOf(i);if(idx>-1){this.transArr.splice(idx,1);}else{this.transArr.push(i);}},}

全选

<p @click="checkAll()">全选</p>

methods:{//全选checkAll(){var len = this.translist.length;this.transArr = [];for(var i=0;i<len;i++){this.transArr.push(i);}},}

经常遇到一个按钮控制全选/全不选，下面在全选的基础上附上 全选/全不选 代码

全选/取消全选

<p @click="choosecheck()">{{isCheckAll?'清空':'全选'}}</p>

methods:{//全选/取消全选转换choosecheck(){if(this.isCheckAll){this.clearCheckbox();}else{this.checkAll()}},//全选checkAll(){var len = this.translist.length;this.transArr = [];for(var i=0;i<len;i++){this.transArr.push(i);}},//取消全选clearCheckbox(){this.transArr = [];},}computed: {isCheckAll(){if(this.transArr.length==this.translist.length){return true;}return false;},}