码迷,mamicode.com
首页 > 其他好文 > 详细

监听页面,反应对象样式

时间:2020-11-27 11:51:45      阅读:19      评论:0      收藏:0      [点我收藏+]

标签:loading   cat   this   red   atl   else   lazy   image   span   

<div
        link="/home"
        class="home"
        @click="homeLink"
        :class="{ activeClass: homeIndex }"
      >
        首页
      </div>
      <div
        link="/category"
        class="category"
        @click="catLink"
        :class="{ activeClass: categoryIndex }"
      >
        全部商品
      </div>
data() {
    return {
      homeIndex: false,
      categoryIndex: false,
      search: "", // 搜索条件
    };
  },
  watch: {
    $route(to, from) {
      if (to.path == "/home") {
        this.homeIndex = true;
        this.categoryIndex = false;
      } else if (to.path == "/category") {
        this.categoryIndex = true;
        this.homeIndex = false;
      } else {
        this.homeIndex = false;
        this.categoryIndex = false;
      }
    },
  },
.nav-control .tabControl .activeClass {
  color: red;
  border-bottom: 1px red solid;
}

 技术图片

 

 技术图片

 

技术图片

 

监听页面,反应对象样式

标签:loading   cat   this   red   atl   else   lazy   image   span   

原文地址:https://www.cnblogs.com/chunying/p/14031472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!