vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡動(dòng)態(tài)更改css樣式的方法
更新時(shí)間：2018年05月31日 11:25:07 作者：milli236
這篇文章主要介紹了vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡-動(dòng)態(tài)更改css樣式的方法，代碼分為html和js兩部分,需要的朋友可以參考下
html
<ul class="header-list">
<li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}">{{item.name}}</a></li>
</ul>
js
var app = new Vue({
el:"#app",
router,
data:{
m:"hello vue.js",
active:'2',
idx:'0', //默認(rèn)選擇首頁
headerList:[
{name:'首頁1'},
{name:'首頁2'},
{name:'首頁3'},
{name:'首頁4'},
{name:'首頁5'},
{name:'首頁6'}
]
},
methods:{
// 1.選擇
selectMainTheme:function(index){
console.log("selectMainTheme" + index);
console.log("idx" + this.idx);
this.idx = index;
}
//
}
});
總結(jié)
以上所述是小編給大家介紹的vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡動(dòng)態(tài)更改css樣式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
解決vue處理axios post請(qǐng)求傳參的問題
下面小編就為大家分享一篇解決vue處理axios post請(qǐng)求傳參的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue 的 keep-alive 是一個(gè)內(nèi)置組件,用于緩存不活動(dòng)的組件實(shí)例,避免重復(fù)渲染,從而優(yōu)化應(yīng)用性能,下面就跟隨小編一起來看看其核心實(shí)現(xiàn)原理和緩存內(nèi)容吧2025-03-03
vue導(dǎo)出excel多層表頭的實(shí)現(xiàn)方案詳解
這篇文章主要為大家詳細(xì)介紹了vue導(dǎo)出excel多層表頭的實(shí)現(xiàn)方案,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中正確使用jQuery的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
解決運(yùn)行vue項(xiàng)目?jī)?nèi)存溢出問題
這篇文章主要介紹了解決運(yùn)行vue項(xiàng)目?jī)?nèi)存溢出問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
props是Vue中最常見的父子通信方式,使用起來也比較簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于Vue3中props和emit的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
props指父組件往子組件中傳入?yún)?shù)，這篇文章主要為大家介紹了vue3中props的原理與使用，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-05-05
今天小編就為大家分享一篇Vue 監(jiān)聽列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09