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