vue绑定内联样式
Vue 绑定 样式 内联
2023-09-27 14:24:30 时间
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'"
发现报错,后来查看文档,才发现应该用上面的方式!
相关文章
- Vue 样式绑定、事件绑定
- 15 Vue中子组件样式的绑定和行内样式模版编写
- 【Vue】利用Vue绑定Html元素事件(如:click)综合示例
- Vue - 指令式按钮节流(Button)
- Vue——vue中的双向数据绑定
- Vue 温故而知新 props如何双向属性绑定
- vue 结合localStorage 来双向绑定数据
- Vue怎么通过JSX动态渲染组件
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- (26)打鸡儿教你Vue.js
- 在vue中使用async/await遇到的坑
- Vue 小组件input keyup.enter绑定
- Vue 动态样式绑定
- Vue-过滤器filters--数据处理--主要用于时间格式化
- vue基础---事件处理
- vue学习笔记【v-model 双向绑定、slot 插槽、浅拷贝与深拷贝】
- vue使用vue-resource,进行网络请求
- vue中引入Tinymce富文本编辑器
- 使用Proxy实现vue数据双向绑定
- Vue之动态绑定CSS样式
- 用JS简单实现Vue的双向绑定
- Vue.js 样式绑定