參考https://blog.csdn.net/qq_38543537/article/details/79142578。
@click="currentIndex = index"http://點(diǎn)擊時(shí)獲取當(dāng)前的索引值。
v-bind:class="{active: index === currentIndex}"http://綁定點(diǎn)擊后的樣式為active類诀豁，且當(dāng)前索引值等于幾就是在第幾個(gè)添加active類。
data中設(shè)置currentIndex: 0窥妇，默認(rèn)給第一個(gè)綁定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: "智能點(diǎn)讀"
},
{
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);
}
實(shí)現(xiàn)效果
切換active.gif
