小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;}