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