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 }
最終實現，如下圖：點擊哪個哪個變化，其他的恢復默認樣式
希望可以對小伙伴有所幫助哦！