您好,登錄后才能下訂單哦!
在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ù)值就行了
<template> <div id="app"> <ul> <li v-for="(mx, key) in list" @click="ck(mx)" :class="[{active: activeName == mx}]"> {{mx}} </li> </ul> </div> </template> <script> export default { data() { return { list: ['網(wǎng)易', '騰訊', '愛(ài)奇藝', '優(yōu)酷', '土豆', '斗魚(yú)'], activeName: '網(wǎng)易' } }, methods: { ck(mx) { this.activeName = mx } } } </script> <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; } } } </style>
知識(shí)點(diǎn)補(bǔ)充:
exact-active-class 和 active-class 的區(qū)別
router-link 默認(rèn)情況下的路由是模糊匹配,例如當(dāng)前路徑是 /article/1 那么也會(huì)激活 <router-link to="/article">,所以當(dāng)設(shè)置 exact-active-class 以后,這個(gè) router-link 只有在當(dāng)前路由被全包含匹配時(shí)才會(huì)被激活 exact-active-class 中的 class,例如:
<router-link to="/article" active-class="router-active"></router-link>
當(dāng)用戶(hù)訪(fǎng)問(wèn) /article/1 時(shí)會(huì)被激活為:
<a href="#/article" class="router-active" rel="nofollow"></a>
而當(dāng)使用:
<router-link to="/article" exact-active-class="router-active"></router-link>
當(dāng)用戶(hù)訪(fǎng)問(wèn) /article/1 時(shí),不會(huì)激活這個(gè) link 的 class:
<a href="#/article" rel="nofollow"></a>
總結(jié)
到此這篇關(guān)于Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊active內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。