在Vue中如何實(shí)現(xiàn)點(diǎn)擊active并第一個(gè)默認(rèn)選中功能

位置:首頁(yè) / 新聞中心 / 知識(shí)教程

知識(shí)教程 Admin 2024-02-22 17:49:03 1109

在jQuery中:

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

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

有一種繞口令:東邊的喇嘛買(mǎi)了西邊的喇叭

o((⊙﹏⊙))o

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

1.遍歷出來(lái), 在click中賦值 遍歷出來(lái)的mx。

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

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

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

  1. <div id="app">

  2.  

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

    •    {{mx}}

    •  

    •  


    • <style lang="less">

    • .box {

    •  list-style: none;

    •  text-align: center;

    •  padding: 0;

    •  width: 85%;

    •  margin: auto;

    •  margin-top: 30px;

    •  

    •  ul {

    •   list-style: none;

    •   text-align: center;

    •  

    •   li {

    •    padding: 15px;

    •    border-radius: 30px;

    •   }

    •  

    •   li.active {

    •    color: red;

    •    transition: all .8s;

    •    background: #000;

    •    color: #fff;

    •   }

    •  }

    • }

    知識(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)用戶訪問(wèn) /article/1 時(shí)會(huì)被激活為:

    而當(dāng)使用:

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


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

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

    15934152105 掃描微信