Object syntax

The object syntax for :style looks a lot like CSS, but it’s actually a JavaScript object. CSS property names can be humped or delimited (remember to use quotes) :

<div :style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>
Copy the code
data(){
    return {
        activeColor: 'red'.fontSize: 30}}Copy the code

Binding a style object directly makes the template cleaner:

<div :style="styleObject"></div>
Copy the code
data(){
    return {
        styleObject: {
            color: 'red'.fontSize: '13px'}}}Copy the code

Object syntax is often used in conjunction with computed properties that return objects:

<div :style="styleObject"></div>
Copy the code
data(){
    return {
        mainColor: 'red'.mainFontSize: '12px'}},computed: {
    styleObject(){
        return {
            color: this.mainColor,
            fontSize: this.mainFontSize
        }
    }
}
Copy the code

Array syntax

The array syntax of :style allows multiple style objects to be applied to the same element:

<div :style="[baseStyles, overridingStyles]"></div>
Copy the code

Automatic prefix adding

When using CSS property in :style that requires vendor Prefix (browser engine prefix), Vue will automatically detect and add the corresponding prefix. Vue uses runtime checks to determine which styles of property are supported by the browser. If the browser does not support a property, Vue tests several times to find a prefix that does

Multiple values

We can provide an array of values for property in the style binding. This is often used to provide multiple prefixed values, for example:

<div :style="{ divplay: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Copy the code

This only renders the last value in the array that is supported by the browser. In the above example, if browsing supports flexbox without the prefix, only display: flex will be rendered.