vue的数据是v-for循环出来的,如何点击当前,给到变色效果(动态绑定CSS样式)

小demo,仅作记忆使用。
emm…结构问题,有点吃藕’

template:

<div class="con">
	<ul class="con-list">
		 <li class="con-item" v-for="(item,index) in list" :key="index" @click="son(item,index)" :class='index==isActive?"isActive":""'>
			 <i class="con-pay" @click="son(item,index)" :class='index==s1?"s1":""'>{{item.pay}}元</i>
         	<i class="con-pre" @click="son(item,index)" :class='index==s2?"s2":""'>售价{{item.pre}}元</i>
		</li>
	</ul>
</div>

data:

 data(){
        return{
            isActive:0,
            s1:0,
            s2:0,
            // 话费
            list: [
               {pay:30,pre:29.97}, 
               {pay:50,pre:49.95}, 
               {pay:100,pre:99.90}, 
               {pay:200,pre:199.80}, 
               {pay:300,pre:299.70}, 
               {pay:500,pre:499.50}
            ],
        }

methods:

 son(item,index){
        this.isActive=index;
        this.s1=index;
        this.s2=index;

        }

style:

.isActive{
    background-color: #ff7e00;
    color: #fff;
}
.s1{ color: #fff;}
.s2{ color: #fff;}

效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值