Vue点击切换颜色效果

观看一下效果图

效果图.gif

---

先说一下具体思路，是通过点击方法来自定义class类的颜色样式来实现
首先，写好静态页面

//在vue的data里自定义一个数组和一个值
carNumColor:['蓝牌','绿牌','黄牌','白牌']
liColor:0,

1.然后在页面调用使用v-for循环遍历 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;
}
}