vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果【推薦】
更新時(shí)間：2018年06月22日 10:57:14 作者：dong-v
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果的思路詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
實(shí)現(xiàn)點(diǎn)擊按鈕使當(dāng)前按鈕高亮，其他按鈕復(fù)原的效果
實(shí)現(xiàn)思路
•在data中定義即將渲染的數(shù)據(jù)，及active
data() {
return {
wpList: [
{
name: '食品飲料'
},
{
name: '鮮花'
},
{
name: '蛋糕'
},
{
name: '水果生鮮'
},
{
name: '服裝鞋帽'
},
{
name: '其它'
}
],
active:''
}
}
...
•定義高亮的標(biāo)簽類名
.active {
background: #fd7522;
border: 1px solid #fd7522;
color: #fff;
}
•動(dòng)態(tài)渲染按鈕的數(shù)據(jù)，并動(dòng)態(tài)的增加active類名（當(dāng)active為當(dāng)前name值時(shí)添加），添加點(diǎn)擊事件（點(diǎn)擊時(shí)讓active=name）
<el-row class="wp-list">
<el-button v-for="item in wpList" :key="item.name"
:class="{active : active == item.name}"
@click="selected(item.name)">{{item.name}}</el-button>
</el-row>
•在methods中定義點(diǎn)擊事件函數(shù)
selected(name){
this.active = name;
}
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
VUE中computed 、created 、mounted的先后順序說明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-cli3 設(shè)置端口號(hào)(81)無效的解決
這篇文章主要介紹了vue-cli3 設(shè)置端口號(hào)(81)無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
詳解Vue中如何實(shí)現(xiàn)圖片處理與濾鏡效果
Vue.js作為一個(gè)靈活的JavaScript框架,可以很容易地與圖像處理庫和濾鏡效果庫集成,以實(shí)現(xiàn)各種圖像處理需求,下面我們就來學(xué)習(xí)一下vue是如何實(shí)現(xiàn)圖片處理與濾鏡效果的吧2023-10-10
這篇文章主要為大家介紹了Vue開發(fā)常用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue3中封裝axios請(qǐng)求最新實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue3中封裝axios請(qǐng)求的最新實(shí)現(xiàn)步驟,在Vue 3中可以通過封裝axios來實(shí)現(xiàn)接口的統(tǒng)一管理和調(diào)用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue學(xué)習(xí)筆記之過濾器的基本使用方法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之過濾器的基本使用方法,結(jié)合實(shí)例形式分析了vue.js過濾器的基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用
這篇文章主要介紹了vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue中設(shè)置height:100%無效的問題及解決方法
這篇文章主要介紹了vue中設(shè)置height 100%無效的問題及解決方法，需要的朋友可以參考下2018-07-07
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時(shí)間是一項(xiàng)常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時(shí)間,需要的朋友可以參考下2024-01-01
vue打包更新packge.json版本號(hào)的全過程
這篇文章主要介紹了vue打包更新packge.json版本號(hào)的全過程,文章通過圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08