css vue 内联_VueJs Style 绑定内联样式 对象语法

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

data: {

activeColor: 'red',

fontSize: 30

}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

data: {

styleObject: {

color: 'red',

fontSize: '13px'

}

}

同样的，对象语法常常结合返回对象的计算属性使用。

案例演示：

VueJsAndStyle

VueJsAndStyle

var vm = new Vue({

el:"#app",

data: {

activeColor: 'red',

fontSize: 30

}

})

VueJsAndStyle

var vm = new Vue({

el:"#app_one",

data: {

styleObject: {

color: 'red',

fontSize: '13px'

}

}

})

{{ msg }}

//VueJs结合返回对象的计算属性使用

new Vue({

el: "#app_two",

data: {

msg: "结合返回对象的计算属性使用",

color: 'red',

fontSize: '12px'

},

computed: {

styleObject: function () {

return {color: 'red', fontSize: '23px'}

}

}

})