Vue3之Style绑定

对象语法

:style的对象语法看着非常像CSS，但其实是一个JavaScript对象。CSS property名可以用驼峰式或短横线分隔（记得用引号括起来）来命名：

<div :style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>
复制代码

data(){
    return {
        activeColor: 'red',
        fontSize: 30
    }
}
复制代码

直接绑定一个样式对象会让模板更清晰：

<div :style="styleObject"></div>
复制代码

data(){
    return {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }
}
复制代码

对象语法常常结合返回对象的计算属性使用：

<div :style="styleObject"></div>
复制代码

data(){
    return {
        mainColor: 'red',
        mainFontSize: '12px'
    }
},
computed: {
    styleObject(){
        return {
            color: this.mainColor,
            fontSize: this.mainFontSize
        }
    }
}
复制代码

数组语法

:style的数组语法可以将多个样式对象应用到同一个元素上：

<div :style="[baseStyles, overridingStyles]"></div>
复制代码

自动添加前缀

在:style中使用需要vendor prefix（浏览器引擎前缀）的CSS property时，Vue将自动侦测并添加相应的前缀。Vue是通过运行时检测来确定哪些样式的property是被当前浏览器支持的，如果浏览器不支持某个property，Vue会进行多次测试找到支持它的前缀

多重值

可以为style绑定中的property提供一个包含多个值得数组，常用于提供多个带前缀的值，例如：

<div :style="{ divplay: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
复制代码

这样写只会渲染数组中最后一个被浏览器支持的值。在上面的例子中，如果浏览支持不带前缀的flexbox，那么就只会渲染display: flex。