很多时候我们会遇到改变v-for生成的某一个元素上的样式,我们可以动态的添加上class来操作

<div class="nav">
  <ul class="clearfix">
    <li v-for="(item, index) in navLists" :key="item.name" :class="{ active: $route.meta.active === item.router }">
      <router-link :to="item.router">{{ item.name }}</router-link>
      <div class="nav_active">
        <p class="active_content" :class="`active_log${index + 1}`"></p>
      </div>
    </li>
  </ul>
</div>

然后在css里面写样式就行了

.active_log1:after {
   right: 10px;
}
.active_log2:after {
   right: 22px;
}
......

 

Logo

前往低代码交流专区

更多推荐