站长资源网络编程
vue使用vant中的checkbox实现全选功能
简介本文实例为大家分享了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" class="listli" ></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实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。