Vue--点击改变样式

Posted 2021-01-14 vinieo

当某个链接或元素被选中时可以时，需要改变其颜色或状态，而stylus中提供&选择器,&指向父选择器，用于判断父元素达到某条件时改变状态，下面的例子中当父元素router-link有被选中（active）时，子元素改变颜色并加上下划线。

//html
<router-link tag="div" class="tab-item" to="/recommend">
   <span class="tab-link"></span>
</router-link>

//css
.tab-link
      padding-bottom: 5px
      color: #fff
&.router-link-active
  .tab-link
      color: #000
      border-bottom: 2px solid #000

原文链接：https://blog.csdn.net/tjzc1352640/article/details/78359863