Vue动态改变css样式的3种方法

在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？官网上其实写的很详细了，对象语法，数组语法等。我自己总结了在开发中，个人用的比较多的三种方式

1.class，三元表达式

:class="[occupation === '请选择' ? 'lh60' : 'lh61']"

css
.red{
    color:red;
}
.blue{
    color:blue;
}

2.:style=“xxxxx”,这里xxx可以是个函数，也可以是个计算属性

<div :style="{'width': '350px', 'left': leftWidth+'px', 'top': '200px','display': 'none'}">

leftWidth是一个变量

2.1：函数形式

:style="handleStyle(second)"

handleStyle(deg){
    return { transform: "rotate(" + deg + "deg)"};
}

2.2：计算属性

:style="imgStyle"

computed: {
    imgStyle() {
        return {
            padding: this.spacing + "px",
        };
    },
}

这两种方式很像，区别在于，使用方法的时候，视图刷新，函数就会重新计算一遍值。计算属性，会把以前的值缓存起来，没有变化，就不会计算，直接返回以前的值