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