vue使用vant中的checkbox實現全選功能
阿新 • • 發佈:2020-11-18
本文例項為大家分享了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: "張樑俊",{ id: "005",name: "劉路",],}; },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實戰教程》
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。