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