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'"

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

最新文章

  1. 关于在线预览word,excel,ppt,pdf的需求处理方法。
  2. 【bzoj3240】 Noi2013—矩阵游戏
  3. java 8 新特性
  4. js分辨浏览器类别和版本
  5. const char*、char*、char* const、char[]、string的区别
  6. 获取Java的32位MD5实现
  7. [ext4]09 磁盘布局 - superblock备份机制
  8. 微信小程序封装http访问网络库实例代码
  9. System.Object简介
  10. PHP静态化技术
  11. 那些年~~~我们的C#笔试内测题目
  12. LeetCode算法题-Shortest Completing Word(Java实现)
  13. jquery 判断浏览器版本
  14. 聊聊 PHP 私有组件以及如何创建自己的 PHP 组件 (转)
  15. grep基础用法
  16. Python3绘图之Matplotlib(03)
  17. vue 实现modal
  18. Flutter - 创建底部导航栏
  19. Nuxeo 认证绕过和RCE漏洞分析(CVE-2018-16341)
  20. BZOJ.3624.[APIO2008]免费道路(Kruskal)

热门文章

  1. android客户端向java服务端post发送json
  2. Java 类和对象7
  3. CUDA笔记(六)
  4. 最近Criteria
  5. links[v1]
  6. 事件处理:pull与push
  7. centeros 7配置mailx使用外部smtp服务器发送邮件
  8. 对比学习sass和stylus的常用功能
  9. Looger级别
  10. 【LeetCode-面试算法经典-Java实现】【057-Insert Interval(插入区间)】