Vue點擊切換Class變化,實現Active當前樣式操作

剛入門Vue沒多久，在制作過程中遇到很多簡單實用的小技巧。

沒有太多的墨水，直接上代碼：

一、先在data里增加一個變量，用來儲存當前點擊的元素

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

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

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

三、點擊事件：改變data里面activeClass的值

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

四、在style中寫上 .active 樣式

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

補充知識：Vue實現非循環active點擊切換樣式

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

<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;},

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