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實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。