阅读 1430

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);
}
复制代码

目前总结出了三种,如果后面还发现有新的方式,再行记录。

关注下面的标签,发现更多相似文章
评论