cssvue⽤js变量_Vue动态改变css样式的⽅法总结__Vue.js 在⽹页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue⾥如何实现呢？官⽹上其实写的很详细了，对象语法，数组语法等。我⾃⼰总结了在开发中，个⼈⽤的⽐较多的三种⽅式
1.class，三元表达式
根据三元表达式来动态的在两种样式间切换
:class="[item.isPlaying ? 'playing' : '', 'drum-item’]"
2.:style=“xxxxx”，这⾥xxx可以是个函数，也可以是个计算属性
函数：
:rotate(" + deg + "deg)" };
},
计算属性：
:style=“imgStyle”
......
imgStyle() {
js数组方法总结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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。