vue切换class_Vue点击切换Class变化,实现Active当前样式操作
剛入門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当前样式操作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c#读蓝牙数据_客户端实现蓝牙接收(C#
- 下一篇: python编程思维培养_Python教