Vue 動態改變css樣式的方法總結__Vue.js

在網頁開發中，我們經常會遇到動態的改變某個元素樣式的需求，在vue裏如何實現呢？官網上其實寫的很詳細了，對象語法，數組語法等。我自己總結了在開發中，個人用的比較多的三種方式
1.class，三元表達式
根據三元表達式來動態的在兩種樣式間切換
:class="[item.isPlaying ? 'playing' : '', 'drum-item’]"
2.:style=“xxxxx”,這裏xxx可以是個函數，也可以是個計算屬性
函數：
:style="handleStyle(second)”
handleStyle(deg) {
return { transform: "rotate(" + deg + "deg)" };
},
計算屬性：
:style=“imgStyle”
imgStyle() {
return {
padding: this.spacing + "px",
};
},
這兩種方式很像，區別在於，使用方法的時候，視圖刷新，函數就會重新計算一遍值。計算屬性，會把以前的值緩存起來，沒有變化，就不會計算，直接返回以前的值
3.使用css變量，通過觀察屬性來動態的改變樣式
譬如，我現在有這樣一個css變量
VUE.JS
data: ()=> {
return {
base: '#ffff'
}
}
.spantext {
color: var(color);
}
現在通過觀察屬性，監聽base值的變化
watch: {
base: function(newValue, oldValue) {
this.updateColor();
}
},
updateColor() {
this.$el.style.setProperty("color", this.base);
}
目前總結出了三種，如果後面還發現有新的方式，再行記錄。
版權聲明：著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
作者: 野生猿James
原文鏈接：https://juejin.im/post/6844903919965962254