vue绑定style

绑定单个变量

v-bind:style 的对象语法非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法

HTML代码：

 <li :style="textColor"> </li>

JS代码：

var vm= new Vue({
    el:‘.box‘,
    data:{
        textColor: { 'color': 'red' }
    }
})

绑定多个变量

HTML代码：

 <li :style="{color:textColor, fontSize:size, fontFamily:family}"> </li>

JS代码：

var vm= new Vue({
    el:‘.box‘,
    data:{
       textColor:'blue',
       size:'30px',
       family:'宋体',
    }
})

绑定对象

HTML代码：

 <li :style="styleObj"> </li>

JS代码：

var vm= new Vue({
    el:‘#box‘,
    data:{
        styleObject:{
            color:‘red‘,
            fontSize:‘30px‘
        }
    }
})

绑定数组

HTML代码：

 <li :style="[styleObjA, styleObjB]"> </li>

JS代码：

var vm= new Vue({
    el:‘#box‘,
    data:{
        styleObjA:{
            fontSize:‘20px‘,
            color:‘red‘
        },
        styleObjB:{
            textDecoration:‘underline‘
        }
    }
})