vue最简单的点击切换active
很多朋友在做小程序或vue项目选项卡或选择同类不同项的时候,需要变色的情况,本人提供最简单的方式,屡试不爽。我们来完成一个这三个开餐时间,点击那个就对应那个active,并且能获取对应的数据:模拟数据time: [{timer: '17'},{timer: '18'},{timer: '19'}],循环列表渲染成html,那么就有了index,也就是所说的下...
·
很多朋友在做小程序或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;
}
更多推荐
已为社区贡献4条内容
所有评论(0)