本文例項為大家分享了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實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。