vue结合原生class类名快速实现背景点击切换并保持
1.实现目标效果 点击切换背景图于文字颜色
2.css部分代码
.afterActiveTitle {
color: #ffffff;
background-image: url("~@/assets/xxx/xxx.png");
background-size:100% 100% ;
border-bottom: 2px solid #9bb9f1;
}
.notCheckTitle {
color: #b1bfd4;
background: #294061;
border-bottom: 0;
}
3.html部分代码 这里使用循环v-for会更加美观,易于理解,直接挨个修改
<ul>
<li @click="gotoHomepage" tabindex="1" :class="{'afterActiveTitle':clickIndex===0,'notCheckTitle':clickIndex!==0}">首页</li>
<li @click="gotoDate" tabindex="2" :class="{'afterActiveTitle':clickIndex===1,'notCheckTitle':clickIndex!==1}">数据</li>
<li @click="gotoService" tabindex="3" :class="{'afterActiveTitle':clickIndex===2,'notCheckTitle':clickIndex!==2}">服务</li>
<li @click="gotoSafe" tabindex="4" :class="{'afterActiveTitle':clickIndex===3,'notCheckTitle':clickIndex!==3}">安全</li>
<li @click="gotoLog" tabindex="5" :class="{'afterActiveTitle':clickIndex===4,'notCheckTitle':clickIndex!==4}">日志管理</li>
<li @click="gotoMessage" tabindex="6" :class="{'afterActiveTitle':clickIndex===5,'notCheckTitle':clickIndex!==5}">消息</li>
</ul>
4.data中参数的设置
data() {
return {
clickIndex:0,
};
},
5.点击事件对应的方法
gotoHomepage() {
this.clickIndex=0;
this.$router.replace("/Home/xxx");
},
gotoDate() {
this.clickIndex=1;
this.$router.replace("/Home/xxx/xxx");
},
gotoService() {
this.clickIndex=2;
this.$router.replace("/Home/xxx");
},
gotoSafe() {
this.clickIndex=3;
this.$router.replace("/Home/xxx");
},
gotoLog() {
this.clickIndex=4;
this.$router.replace("/Home/xxxxx");
},
gotoMessage() {
this.clickIndex=5;
this.$router.replace("/Home/xxx");
},
6.小结