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 실전 강좌》.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.