代码改变世界

一种在vue环境下动态改变css样式class属性的方法

2021-06-21 16:44  罗任德  阅读(1777)  评论(0)  编辑  收藏  举报

 

 

1 <div class="item" :class="changeStyle" @click="dododo()">
2     onepiece
3 </div>

 

class=“item” 是固定样式，:class=“changeStyle” 是动态样式。
在css中，分别定义两个待变换样式的类。如：

 

1 .bg-red {
2     background-color: red;
3 }
4 
5 .bg-green {
6     background-color: green;
7 }

 

dododo() {
	this.changeStyle = this.changeStyle ? 'bg-red' : 'bg-green';
}