Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)
在jQuery中：
就是讓第一個(gè)選中，其他的不選中！
當(dāng)點(diǎn)擊后當(dāng)前選中，其他不選中。
有一種繞口令：東邊的喇嘛買了西邊的喇叭
o((⊙﹏⊙))o
在Vue中快速創(chuàng)建與選中
1.遍歷出來， 在click中賦值 遍歷出來的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)易', '騰訊', '愛奇藝', '優(yōu)酷', '土豆', '斗魚'],
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)用戶訪問 /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)用戶訪問 /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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue中創(chuàng)建mapbox地圖，地圖只顯示一般，查看瀏覽器開發(fā)者工具，發(fā)現(xiàn)將canvas.mapboxgl-canvas 的position:absolute去掉就解決了，今天小編通過本文給大家分享詳細(xì)過程，感興趣的朋友跟隨小編一起看看吧2023-07-07
npm?install時(shí)卡住不動(dòng)的五種解決方法
在我們安裝完Node.js之后,需要使用npm命令來安裝一些工具,下面這篇文章主要給大家介紹了關(guān)于npm?install時(shí)卡住不動(dòng)的五種解決方法,需要的朋友可以參考下2023-06-06
Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目打包優(yōu)化的方法實(shí)戰(zhàn)記錄
最近入職了新公司,接手了一個(gè)新拆分出來的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,把經(jīng)驗(yàn)分享出來,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包優(yōu)化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
MVVM模型主要是為了分離視圖(View)和模型(Model)，其優(yōu)點(diǎn)為：低耦合、可重用性、獨(dú)立開發(fā)以及可測(cè)試，視圖和模型分離的特點(diǎn)給了 Vue 很大的啟發(fā)，這篇文章主要介紹了MVVM模型在Vue中的使用,需要的朋友可以參考下2022-11-11
vue 每次渲染完頁面后div的滾動(dòng)條保持在最底部的方法
下面小編就為大家分享一篇vue 每次渲染完頁面后div的滾動(dòng)條保持在最底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了element-ui 彈窗組件封裝的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了詳解Vue中的Props與Data細(xì)微差別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要來和大家一起深入探討下Vue中keep-alive?的作用及其使用方法,幫助開發(fā)者在實(shí)際項(xiàng)目中充分利用這一功能實(shí)現(xiàn)高效的組件管理2024-11-11