需求：初始化高亮第一个按钮，然后点击其他按钮时，点击的按钮变色，未点击的以及曾点击过的按钮则恢复成未点击的颜色
由于第一个按钮是独立写的，不在遍历内，所以要单独写判断，这里我用的Sum这个，代码中就不细写
1 <button :class="active == Sum ? 'active':'anliu'" type="default" @click="all()"><view class="yonghu">总用户</br>{{Sum}}</view></button> 2 <view v-for="(item, index) in sequList" :key="index" > 3 <button :class="active == item ? 'active':'anliu'" type="default" @click="sequ(item,index)"><view class="yonghu1">{{item.communityName}}</br>{{item.sum}}户</view></button> 4 </view>
1 data() { 2 return { 3 active:'', 4 } 5 }
1 // 总社区 2 all(){ 3 // console.log('总'); 4 // console.log(this.Sum); 5 this.active = this.Sum; 6 7 var tid=this.sequList[0].communityParentId ; 8 // console.log(tid); 9 // 请求到所有数据 10 ajax.getshequuser({ 11 userId: this.userId, 12 13 communityId:tid 14 }).then(res => { 15 // this.manageManBack(res); 16 console.log(res) 17 // console.log(res.data); 18 this.manageManBack(res); 19 uni.showToast({ 20 title: '当前显示为全部用户列表!', 21 icon: 'none', 22 }) 23 }) 24 25 26 27 }, 28 // 社区按钮 29 sequ(item,index){ 30 31 // console.log(item,index); 32 this.active = item; 33 // 社区id 34 this.sequId=item.communityId; 35 ajax.getshequuser({ 36 userId: this.userId, 37 // communityId: cId 38 communityId:this.sequId 39 }).then(res => { 40 this.manageManBack(res); 41 // this.disabledA=false; 42 console.log(res); 43 uni.showToast({ 44 title: '当前显示为'+item.communityName+'列表!', 45 icon: 'none', 46 }) 47 }) 48 },
1 .anliu{ 2 width: 165upx; 3 height: 145upx; 4 background:#f84201 ; 5 float: left; 6 margin-left: 18upx; 7 margin-bottom: 10upx; 8 margin-top: 20upx; 9 font-size: 24upx; 10 color: #ffffff; 11 line-height:40upx; 12 13 } 14 .active { 15 16 width: 165upx; 17 height: 145upx; 18 background-color: #aa0000; 19 float: left; 20 margin-left: 18upx; 21 margin-bottom: 10upx; 22 margin-top: 20upx; 23 font-size: 24upx; 24 color: #FFFFFF; 25 line-height:40upx; 26 }
初始化的时候第一个总计按钮高亮的话，则直接将该方法在初始化时调用即可