一種在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';
}