Краткое изложение метода Vue для динамического изменения стилей css

Vue.js

В веб-разработке мы часто сталкиваемся с необходимостью динамического изменения стиля элемента, как это реализовать во Vue? Официальный сайт на самом деле очень подробный, синтаксис объектов, синтаксис массивов и т. д. Я подытожил три способа, которые лично я использую в развитии.

1.класс, троичное выражение

Динамическое переключение между двумя стилями на основе троичного выражения

: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);
}

Теперь слушайте изменения базового значения, наблюдая за свойством

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

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

В настоящее время обобщены три вида методов, если позже будут обнаружены новые методы, запишите их снова.

Категории