vue中点击导航/元素改变颜色

1.我使用的是nuxt,导航是nuxt-link形成的, 点击后审查元素会发现它的class多了一个nuxt-link-exact-active,所以我们只需要直接在css样式里

.nuxt-link-exact-active {
  color: red;
}

vue同理,是router-link形成的导航栏的话

.router-link-active{
  color: red;
}

2.如果它是几个相同的元素,在切换的时候改变颜色。在传递参数的时候不能穿this,传递进入的this指针是null,所以需要使用@click($event) 传递

<div class="typename" @click="change($event)">iphone</div>
<div class="typename" @click="change($event)">Android</div>
<div class="typename" @click="change($event)">Windows</div>
<div class="typename" @click="change($event)">Mac</div>
    change(event) {
      let ele= event.currentTarget   //获取当前对象
      $('.typename').css('color', 'black')  //把之前的颜色都去掉
      ele.style.color = 'red'
    },

猜你喜欢

转载自blog.csdn.net/qq_41160739/article/details/110238735
今日推荐