在vue中实现点击哪个哪个区域变化背景色和字体颜色，其他默认(uni-app框架中也可以使用)...

 

template:

1 <view class="wrap">
2 <view class="total" :class="{ select: true, active: item.id === sel }" v-for="(item,index) in tabs" :key="index"
3 @click="select(item)">
4 {{ item.label }}
5 </view>
6 </view>

script:

 1 data() {
 2 return {
 3 sel: 1,
 4 tabs: [
 5 {label: '全部(32)', id: 1},
 6 {label: '非常满意(12)', id: 2},
 7 {label: '满意(21)', id: 3},
 8 {label: '一般满意(12)', id: 4},
 9 {label: '不满意(0)', id: 5},
10 ],
11 type: 'default',
12 inverted: false
13 };
14 }
methods:{
select(item) {
this.sel = item.id;
},

css:

 1 .wrap{
 2 margin: 30upx 0 30upx 30upx;
 3 }
 4 .total{
 5 height: 56upx;
 6 border-radius:100px;
 7 background:#F4FAFF;
 8 border:1px solid rgba(76,143,255,1);
 9 color:#4c8fff;
10 text-align:center;
11 padding:8upx 30upx;
12 margin:0 30upx 20upx 0;
13 float:left
14 }
15 .select.active {
16 background: #4c8fff;
17 color: #FFFFFF;
18 }

最终实现，如下图：点击哪个哪个变化，其他的恢复默认样式

希望可以对小伙伴有所帮助哦！

转载于:https://www.cnblogs.com/renxiao1218/p/10899702.html