在Vue中如何實現(xiàn)點擊active并第一個默認選中功能

位置:首頁 / 新聞中心 / 知識教程

知識教程 Admin 2024-02-22 17:49:03 1107

在jQuery中:

就是讓第一個選中,其他的不選中!

當點擊后當前選中,其他不選中。

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

o((⊙﹏⊙))o

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

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

2.class進行決定是否顯示,一點擊就把對應的mx賦到activeName中

3.此時activeName就和mx一模一樣的文本,然后返回一個true能顯示當前的了

4.把最后一個瑕疵補上, 讓第一個默認選中。就是把activeName放一個數(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;

    •   }

    •  }

    • }

    知識點補充:

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

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

    當用戶訪問 /article/1 時會被激活為:

    而當使用:

    當用戶訪問 /article/1 時,不會激活這個 link 的 class:


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

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

    15934152105 掃描微信