在jQuery中：

就是让第一个选中，其他的不选中！

当点击后当前选中，其他不选中。

有一种绕口令：东边的喇嘛买了西边的喇叭

o((⊙﹏⊙))o

在Vue中快速创建与选中

1.遍历出来， 在click中赋值 遍历出来的mx。

2.class进行决定是否显示，一点击就把对应的mx赋到activeName中

3.此时activeName就和mx一模一样的文本，然后返回一个true能显示当前的了

4.把最后一个瑕疵补上， 让第一个默认选中。就是把activeName放一个数值就行了

2. <div id="app">

3.  

4.   <li v-for="(mx, key) in list" @click="ck(mx)" :class="[{active: activeName == mx}]">

5.    {{mx}}

6.  

7.  

10. 
    

11. <style lang="less">

12. .box {

13.  list-style: none;

14.  text-align: center;

15.  padding: 0;

16.  width: 85%;

17.  margin: auto;

18.  margin-top: 30px;

19.  

20.  ul {

21.   list-style: none;

22.   text-align: center;

23.  

24.   li {

25.    padding: 15px;

26.    border-radius: 30px;

27.   }

28.  

29.   li.active {

30.    color: red;

31.    transition: all .8s;

32.    background: #000;

33.    color: #fff;

34.   }

35.  }

36. }

知识点补充：

exact-active-class 和 active-class 的区别

router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class，例如：

当用户访问 /article/1 时会被激活为：

而当使用：

当用户访问 /article/1 时，不会激活这个 link 的 class：

以上就是“在Vue中如何实现点击active并第一个默认选中功能”的详细内容，更多请关注木子天禾科技其它相关文章！