vue绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
 
data: {  activeColor: 'red',  fontSize: 30}
 

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

<div v-bind:style="styleObject"></div>
 
data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}
 

实践，有个div的属性中需要设置background，这里的图片是从数据库读取的，是用户的头像！

v-bind:style="{ background: 'url(' +headimgurl + ') no-repeat' }"

搞定！

之前我尝试着直接写，

style = "background:'url({{headimgurl}}) no-repeat'"

发现报错，后来查看文档，才发现应该用上面的方式！

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6678389.html，如需转载请自行联系原作者