内联style

使用v-bind:style可以给元素绑定内联样式，不过在实际开发中尽量避免内联样式的出现，内联样式不便于维护。

1.对象语法

v-bind:style的对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名，代码示例如下：

<div :style="{width:'100px',height:'100px',fontSize:'14px','background-color':'#FF0000'}">style样式</div>

内联样式直接用对象字面量的方式设置，可读性较差，直接绑定到一个样式对象通常更好，这会让模板更清晰，代码如下：

<div :style="styleObj">style样式</div>
data(){
           return {
                	styleObj:{
                    	    width:"100px",
                    	    height:"100px",
                    	    fontSize:'14px',
                    	    "background-color":"#FF0000"
                     }
           }
}

2.数组语法

<div :style="[styleObj,borderObj]">style样式</div>
data(){
    return {
        styleObj:{
           width:"100px",
           height:"100px",
           fontSize:'14px',
           "background-color":"#FF0000"
        },
        borderObj:{
           border:'1px solid #0000FF'
                }
            }
        }