Vue 列表动态绑定点击样式（active class）以及路由router-link点击样式(router-active-class)

最新推荐文章于 2024-08-02 17:03:03 发布

原创最新推荐文章于 2024-08-02 17:03:03 发布 · 6.8k 阅读

12 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍Vue中如何实现列表动态绑定点击样式，包括普通列表的active-class效果及使用router-link时的路由动态样式配置。通过实例展示了如何在点击列表项时动态改变样式，并解释了router-link-active与router-link-exact-active的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue - 列表动态绑定点击样式（active class）

动态绑定样式是我们经常用到的，所以直接整理了方便以后查阅

用到的相关知识在vue文档

1.普通的列表动态绑定点击样式

来个小demo，实现的是一个点击绑定动态样式active-class的效果

通过index与nowIndex(当前index)作比较，若相同，active-class则为true，显示被点击样式

template部分


  <div id="partice">
    <ul>
      <li
        v-for="(item,index) in list"
        :key="index"
        class="normal-class"
        :class="{ 'active-class': nowIndex === index }"
        @click="changeClass(index)"
      >
        点我
      </li>
    </ul>
  </div>

script部分

export default {
  name: 'Partice',
  data () {
    return {
      list:[1, 2, 3, 4, 5],
      nowIndex: 0
    }
  },
  methods: {
    changeClass (index) {
      this.nowIndex = index
    }
  }
}

style部分

.normal-class{
  display: inline-block;
  width: 20px;
  margin: 10px;
  background: yellow;
}
.active-class{
  background: red;
}

效果图

2.路由动态样式

当我们使用router-link的时候，点击时，router会自动给标签添加样式

router-link-active以及router-link-exact-active

需要注意的是router-link-active 始终会经过路径 / ，所以默认路径 / 其会拥有样式router-link-active

而router-link-exact-active会更加精准的获取到精准地址的标签添加样式。

类似结构如下

    <nav class="border-bottom nav">
      <!-- 导航栏部分 -->
      <router-link to='/' tag="a">商品</router-link>
      <router-link to='/comment' tag="a">评论</router-link>
      <router-link to='/seller' tag="a">商家</router-link>
    </nav>

若要为这两个样式改成自己想要的class名字的话，可以在router添加配置项

linkActiveClass与linkExactActiveClass，指定类名

export default new VueRouter({
  // 配置router active的类名
  // 每个router都会经过/所以会被激活，通过exact可以精准选择所在路由
  linkActiveClass: '',
  linkExactActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'Goods',
      component: BuyGoods
    }, {
      path: '/comment',
      name: 'Comment',
      component: BuyComment
    }, {
      path: '/seller',
      name: 'Seller',
      component: BuySeller
    }
  ]
})

本文为个人学习笔记，如有错误欢迎留言指正，谢谢！