vue绑定内联样式
2024-08-31 17:06:03
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'"
发现报错,后来查看文档,才发现应该用上面的方式!
最新文章
- 关于在线预览word,excel,ppt,pdf的需求处理方法。
- 【bzoj3240】 Noi2013—矩阵游戏
- java 8 新特性
- js分辨浏览器类别和版本
- const char*、char*、char* const、char[]、string的区别
- 获取Java的32位MD5实现
- [ext4]09 磁盘布局 - superblock备份机制
- 微信小程序封装http访问网络库实例代码
- System.Object简介
- PHP静态化技术
- 那些年~~~我们的C#笔试内测题目
- LeetCode算法题-Shortest Completing Word(Java实现)
- jquery 判断浏览器版本
- 聊聊 PHP 私有组件以及如何创建自己的 PHP 组件 (转)
- grep基础用法
- Python3绘图之Matplotlib(03)
- vue 实现modal
- Flutter - 创建底部导航栏
- Nuxeo 认证绕过和RCE漏洞分析(CVE-2018-16341)
- BZOJ.3624.[APIO2008]免费道路(Kruskal)