剛?cè)腴TVue沒(méi)多久，在制作過(guò)程中遇到很多簡(jiǎn)單實(shí)用的小技巧。

沒(méi)有太多的墨水，直接上代碼：

一、先在data里增加一個(gè)變量，用來(lái)儲(chǔ)存當(dāng)前點(diǎn)擊的元素

data() { return { activeClass: -1, // 0為默認(rèn)選擇第一個(gè)，-1為不選擇 }; },

二、在Template里面的代碼，切記在@click方法里面要傳index，

<li : v-for='(item,index) in itemList' :key='index' @click='getItem(index)'> {{itme.text}} </li>

三、點(diǎn)擊事件：改變data里面activeClass的值

getItme(index) { this.activeClass = index; // 把當(dāng)前點(diǎn)擊元素的index，賦值給activeClass },

四、在style中寫上 .active 樣式

.active { /* background: #eee; */ color: #1e82d2; font-weight: bolder;}

補(bǔ)充知識(shí)：Vue實(shí)現(xiàn)非循環(huán)active點(diǎn)擊切換樣式

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

<div class='tab_basic'> <span : @click='today_a'>日</span> <span : @click='today_b'>月</span> <span : @click='today_c'>年</span></div><style>.to_active {background: #409eff!important;color: #fff;}</style>然后在method里定義today_a(){this.shows = 1;},today_b(){this.shows = 2;},today_c(){this.shows = 3;},

完事，歡迎小伙伴有更好的方法分享哈~ 希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。