vue實現(xiàn)點擊當前標簽高亮效果【推薦】
更新時間：2018年06月22日 10:57:14 作者：dong-v
這篇文章主要介紹了vue實現(xiàn)點擊當前標簽高亮效果的思路詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
實現(xiàn)點擊按鈕使當前按鈕高亮，其他按鈕復(fù)原的效果
實現(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)點擊當前標簽高亮效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue3?中的插件和配置推薦大全，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
Vue使用mockjs問題(返回數(shù)據(jù)、get、post 請求)
這篇文章主要介紹了Vue使用mockjs問題(返回數(shù)據(jù)、get、post 請求)，具有很好的參考價值，希望對大家有所幫助。2023-05-05
Hook Event 是 Vue 的自定義事件結(jié)合生命周期鉤子實現(xiàn)的一種從組件外部為組件注入額外生命周期方法的功能，本文重點給大家介紹Vue Hook Event 解讀，感興趣的朋友一起看看吧2023-01-01
這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue動畫打包后失效問題的解決方法,在文中給大家提到了vue-cli 打包后自定義動畫未執(zhí)行的解決方法，需要的朋友可以參考下2018-09-09
最近找到幾個好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價值，感興趣的可以了解一下2021-06-06
這篇文章主要給大家介紹了關(guān)于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁面的逐漸壯大,客戶的需求也越來越多,大屏上面展示的事物也越來越豐富,需要的朋友可以參考下2023-07-07
使用Vue3和Plotly.js繪制動態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動態(tài)加載到圖表中并進行實時更新,本文將展示如何使用Plotly.js和Vue.js實現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
查看vue-cli腳手架的版本號和vue真實版本號及詳細操作命令
本文給大家分享如何查看vue-cli腳手架的版本號和vue真實版本號及詳細操作過程，本文給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-11-11