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

 

 

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

 

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

 

.bg-red {
    background-color: red;
}

.bg-green {
    background-color: green;
}

 

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