vue结合原生class类名快速实现背景点击切换并保持

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.小结

以上就能够完成在vue项目中利用 :class 对类名进行绑定，从而实现一个好用的点击切换的效果 核心是在每次点击的时候对默认的 tabindex 进行值的修改，结合vue的计算属性实现动态的绑定

7.如果觉得对你有帮助的话点个赞再走吧，彦祖！