<style type="text/css">
.on {
color: red;
}
</style>
<div>
<h2 :class="{'on':dj=='dui'}"@click="dj='dui'">默认</h2> // 首先将写好的style 绑定在元素上 :class="{'on':dj=='dui'}" 当这个元素被电机的时候给 dj进行赋值
<p v-for="(p,index) in price"><span @click="dj=index" :class="{'on':dj==index}"><span>sp{{p.sp}}</span> <span>ep{{p.ep}}</span></span></p>
// 进行for循环 需要有下标 (p in index) @click="dj=index" 当点击时给dj赋值当前 index :class="{'on':dj==index}" 绑定class 如果==当前index 绑定class
</div>
vue
data() {
return {
msg: "qwq",
ajsx: "",
price: [{
sp: "0.00",
ep: "100"
}, {
sp: "100",
ep: "00"
}, {
sp: "200",
ep: "300"
}, {
sp: "400",
ep: "500"
}],
dj:"dui" //默认就是对
}
}