vue最简单的点击切换active

很多朋友在做小程序或vue项目选项卡或选择同类不同项的时候，需要变色的情况，本人提供最简单的方式，屡试不爽。



我们来完成一个这三个开餐时间，点击那个就对应那个active，并且能获取对应的数据：

模拟数据

time: [
{timer: '17'},
{timer: '18'},
{timer: '19'}
],

循环列表渲染成html，那么就有了index，也就是所说的下标，没错，就是拿下标来玩的，怎么玩呢？

<li v-for="(item, index) in time"
key="'time' + index"
@click="selectTimer(index)"
:class="timeIndex === index ? 'default default-active' : 'default' ">
{{item.title}}
</li>

首先重点是 :class=”timeIndex === index ? ” ” : ” “>

然后定义一个timeIndex变量，初始化为0，就是下标为0

// 选择时间 @click="selectTimer(index)"
selectTimer(index) {
this.timeIndex = index;
},

上面的函数就是我点击哪个就把他对应的下标赋值，达到指向下标，简单说，我点了第二个，下标为1，我就把1赋给了我自定义的timeIndex，index 和 timeIndex三元运算符比较自然得出了计算，也就是下面：

:class="timeIndex === index ? 'default default-active' : 'default ">

最后定义两个样式default default-active即好了，用三元运行算符如果点击对应的下标就是真的，反之就假，小程序等等都可以这样做哦，重要是思维！

比如：（自己喜欢定制样式）

.default{
color: #404040;
background: #f8f8f8;
}

.default-active{
color: #fff;
background: #f00;
}