觀看一下效果圖
先說一下具體思路，是通過點擊方法來自定義class類的顏色樣式來實現(xiàn)
首先洗贰，寫好靜態(tài)頁面
//在vue的data里自定義一個數(shù)組和一個值
carNumColor:['藍牌','綠牌','黃牌','白牌']
liColor:0,
1.然后在頁面調(diào)用使用v-for循環(huán)遍歷 item屬于它的值:例（藍色）找岖；index屬于他的下標從0開始 ;
2.給標簽如下代碼添加一個：class 我的是active，在css中給active類添加自己需要的樣式敛滋，许布；
3.然后添加點擊方法來獲取他的下標index绎晃，通過index來改變data中的liColor這個值蜜唾，通過判斷index和liColor相同的情況下這個class樣式才會生效；
一下就是div,樣式庶艾，和方法代碼
<div class="carcolor">
<li v-for="(item,index) in carNumgeColor" :key="index" @click="carColor(index)" :class="{active:liColor==index}">{{item}}</li>
</div>
carColor(index){
this.liColor = index
},
.carcolor{
display: flex;
margin-top: 0.8rem;
margin-left: 0.8rem;
.active{
background: #0B6BE3;
color: white;
}
li{
list-style: none;
width: 1.52rem;
height: 0.6rem;
background: #F2F2F4;
color: #79797B;
text-align: center;
border: 1px solid #D6D6D6;
border-radius: 0.1rem;
line-height: 0.6rem;
font-size: 0.3rem;
margin-right: 0.7rem;
}
}
