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'
    },