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

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

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

data() {

return {

activeClass: -1, // 0為默認選擇第一個，-1為不選擇

};

},

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

{{itme.text}}

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

getItme(index) {

this.activeClass = index; // 把當前點擊元素的index，賦值給activeClass

},

四、在style中寫上 .active 樣式

.active {

/* background: #eee; */

color: #1e82d2;

font-weight: bolder;

}

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

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

日

月

年

.to_active {background: #409eff!important;color: #fff;}

然后在method里定義

today_a(){

this.shows = 1;

},

today_b(){

this.shows = 2;

},

today_c(){

this.shows = 3;

},

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

原文鏈接：https://blog.csdn.net/a350110085/article/details/81605092

總結

以上是生活随笔為你收集整理的vue切换class_Vue点击切换Class变化,实现Active当前样式操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。