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

在網頁開發中，咱們常常會遇到動態的改變某個元素樣式的需求，在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變量

<input id="base" type="color" name="base" v-model="base" />
複製代碼

<span class="spantext">VUE.JS</span>
複製代碼

data: ()=> {
    return {
        base: '#ffff'
    }
}
複製代碼

.spantext {
    color: var(--color);
}
複製代碼

如今經過觀察屬性，監聽base值的變化

watch: {
    base: function(newValue, oldValue) {
        this.updateColor();
    }
},

updateColor() {
    this.$el.style.setProperty("--color", this.base);
}
複製代碼

目前總結出了三種，若是後面還發現有新的方式，再行記錄。