在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在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);
}
目前总结出了三种,如果后面还发现有新的方式,再行记录。