vue使用vant中的checkbox实现全选功能

本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下

<template> <div class='visiblePeople'> <topbar /> <ul class='list clear_float'> <li v-for='(item, index) in people' :key='index'> <van-checkbox v-model='item.flag' ></van-checkbox> <div class='right'> <p>{{ item.name }}</p> <p>{{ item.id }}</p> </div> </li> </ul> <div class='bottom'> <div class='left'> <van-checkbox v-model='allcheck' class='all'>全选</van-checkbox> </div> <button @click='jump'>确定</button> </div> </div></template> <script>export default { data() { return { people: [ { id: '002', name: '陈阳', flag: true }, { id: '003', name: '王苗苗', flag: true, }, { id: '004', name: '张梁俊', flag: true, }, { id: '005', name: '刘路', flag: true, }, ], }; }, methods: { //点击确定后跳转回新增合同页面 jump() { this.$router.push('/addContract'); }, //单选按钮切换 // change(index) { // this.people[index].flag = !this.people[index].flag; // console.log(this.people[index].flag); // }, }, computed:{ allcheck:{ get(){ //取值 //every方法，数组中每一项都满足一个条件返回true return this.people.every(item=>item.flag) }, set(newValue){ //设置值 console.log(’触发set方法’) this.people.map(item=>item.flag=newValue) } }, filterAll(){ return this.people.filter(item=>item.flag).length }, count(){ let checkedList=this.people.filter(item=>item.flag) return checkedList.length.reduce((total,item)=>{ return total+item.num },0) } }};</script><style lang='less' scoped>.list { background: #f8f9fb; height: 574px; li { height: 56px; margin: 10px 0 10px 0; float: left; img { width: 19px; height: 19px; float: left; margin: 13px; &.on { display: block; } &.off { display: none; } } .listli { float: left; margin: 19px 13px 0 13px; } .right { float: left; background: #ffffff; width: 328px; height: 56px; padding: 0px 0 0 13px; box-sizing: border-box; p:nth-of-type(1) { font-size: 15px; font-family: PingFang SC; font-weight: 400; color: #000000; line-height: 29px; } p:nth-of-type(2) { font-size: 13px; font-family: PingFang SC; font-weight: 400; color: #666666; line-height: 14px; } } }}.bottom { height: 50px; position: fixed; bottom: 0; .left { width: 237px; background: #ffffff; height: 100%; float: left; img { width: 18px; float: left; margin: 18px 13px 0 18px; &.on { display: block; } &.off { display: none; } } .all { margin: 17px 0 0 14px; } p { float: left; font-size: 13px; font-family: PingFang SC; font-weight: 400; color: #333333; margin-top: 18px; } } button { float: left; width: 138px; height: 50px; line-height: 50px; background: #336afa; color: #ffffff; }}</style>

本次遇到的问题是自己一开始没发现在people数组里面，定义的每一项flag的值设置的类型为字符串型即flag='true',导致一开始进入页面全部无论值为true还是false，复选框都是选中效果，修改之后便没有了此问题。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。