vue给指定class设置css样式_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