参考https://blog.csdn.net/qq_38543537/article/details/79142578。
@click="currentIndex = index"//点击时获取当前的索引值。
v-bind:class="{active: index === currentIndex}"//绑定点击后的样式为active类，且当前索引值等于几就是在第几个添加active类。
data中设置currentIndex: 0，默认给第一个绑定active类。
html
<div class="topNav">
<div class="itemNav" v-for="(nav,index) in navs" @click="currentIndex = index" v-bind:class="{active: index === currentIndex}">
<p>{{ nav.mas }}</p>
</div>
</div>
srcipt
data() {
return {
currentIndex: 0,
navs: [
{
mas: "智能点读"
},
{
mas: "智能问答"
},
{
mas: "词典"
},
{
mas: "概括大意"
},
{
mas: "遣词造句"
},
],
};
},
css
.itemNav {
width: 24%;
height: px2rem(65);
line-height: 0.05;
border: 1px solid rgb(0,153,255);
border-radius: 2%;
float: left;
font-size: px2rem(32);
color: rgb(0,153,255);
text-align: center;
}
.active {
background-color: rgb(0,153,255);
color: rgb(2555,255,255);
}
实现效果
切换active.gif
