在jQuery中：

就是讓第一個(gè)選中，其他的不選中！

當(dāng)點(diǎn)擊后當(dāng)前選中，其他不選中。

有一種繞口令：東邊的喇嘛買了西邊的喇叭

o((⊙﹏⊙))o

在Vue中快速創(chuàng)建與選中

1.遍歷出來， 在click中賦值 遍歷出來的mx。

2.class進(jìn)行決定是否顯示，一點(diǎn)擊就把對應(yīng)的mx賦到activeName中

3.此時(shí)activeName就和mx一模一樣的文本，然后返回一個(gè)true能顯示當(dāng)前的了

4.把最后一個(gè)瑕疵補(bǔ)上， 讓第一個(gè)默認(rèn)選中。就是把a(bǔ)ctiveName放一個(gè)數(shù)值就行了

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. }

知識(shí)點(diǎn)補(bǔ)充：

exact-active-class 和 active-class 的區(qū)別

router-link 默認(rèn)情況下的路由是模糊匹配，例如當(dāng)前路徑是 /article/1 那么也會(huì)激活，所以當(dāng)設(shè)置 exact-active-class 以后，這個(gè) router-link 只有在當(dāng)前路由被全包含匹配時(shí)才會(huì)被激活 exact-active-class 中的 class，例如：

當(dāng)用戶訪問 /article/1 時(shí)會(huì)被激活為：

而當(dāng)使用：

當(dāng)用戶訪問 /article/1 時(shí)，不會(huì)激活這個(gè) link 的 class：

以上就是“在Vue中如何實(shí)現(xiàn)點(diǎn)擊active并第一個(gè)默認(rèn)選中功能”的詳細(xì)內(nèi)容，更多請關(guān)注木子天禾科技其它相關(guān)文章！