v-bind:style关于vue实现内联样式绑定的问题

最新推荐文章于 2021-02-03 15:52:32 发布
最新推荐文章于 2021-02-03 15:52:32 发布
阅读量1.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_34157788/article/details/85165054
版权

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

<span class="avatar"  :style="{backgroundImage:'url('+k.headImg+')'}"></span>

目前vue实现内联样式，将有“-”的改成驼峰式，值之后除了传过来的动态数据外，其他需要的如px，url（）等其他需要的都应该用字符串拼接的形式，完成值。

而以下这种方式，是不行的，测试之后会报错

<span class="avatar"  :style="{background-image:'url('+k.headImg+')'}"></span>

vue用的不精，文档又容易看走眼，还是动手记记吧~

chyykk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初识vue 基础知识点 (1)
rwedgsd的博客
05-09 1001
Vue 是用于构建用户界面的 渐进式 JS框架 它是可以自底向上逐层应用，其核心库只关心视图/模板层，（视图/模板：就是要展示在页面上的东西） 什么是渐进式框架： 声明呈现 ——> 组件系统 ——> 客户端路由 ——> 大规模的状态管理 ——> 构建系统 可以根据项目的不同程度，来选择其中的功能 只使用Vue最基础的声明式渲染的功能，则完全可以把 Vue当做一个模板引擎来使用 想以组件化开发方式进行开发，则可以进一步使用Vue 里面的组件系统 要制作 SPA(单页应用)，则可以使
v-bind动态绑定style问题
qq_43440751的博客
03-16 903
VUE Day2 v-bind动态绑定v-bind动态绑定style[对象语法] v-bind动态绑定style[对象语法] 1.v-bind动态绑定style的标准语法是这样的 <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> 根据这个语法我尝试的敲了第一个代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=
vue引用组件（第三方组件）内联样式处理
weixin_47692776的博客
12-02 266
今天引用ant 的menu组件时，ant-menu-item的内边距一直去不掉 如图 最后发现是组件内部的内联样式，折腾我半天去不掉，最后突然想到还有比他内联样式更横的———！important .ant-menu-item{ height: 180px; padding: 0 !important; margin-top: -4px; } 然后就没有然后了，完美撒花 最后： 在引用组件时，如果有处理不了样式，一定要看看是不是内联样式搞鬼，然后在用！important
vue移出内联样式
qq_40822000的博客
03-24 487
在某种特殊的环境下，需要对第三方组件里面的某个dom节点添加内联样式，然后某种情况移出添加的内联样式，不能覆盖。这种SB的操作也找不出来几个人了，记录一下。 可以把cssText 打印出来看看。 this.$refs.xx.style.cssText = '' 求高招，这样写太别扭了 ...
php+ajax 实现聊天功能（不能实时更新）
php_fighting的博客
04-11 485
<div class="chat-box-input-wrapper"> <div class="chat-box-toolbar"> <input type="file" accept="image/png, image/jpeg, image/jpg" id="input-image"&gt...
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见需求就是操作元素的class列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面...
Vue绑定内联样式问题
12-29
使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>示例...
Vue.2.0.5实现Class 与 Style 绑定的实例
01-19
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style...
vue.js绑定class和style样式（6）
12-29
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和...
Vue 样式绑定的实现方法
12-11
操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是属性，所以可用v-bind处理，通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门...
一个可以将vue标签内样式px转换vw的webpackloader
08-10
一个可以将vue标签内样式px转换vw的 webpack loader
v-bind绑定style时css属性名的写法（驼峰和短横线）
lzh的博客
02-03 1238
我们可以利用v-bind:style来绑定一些CSS内联样式。 在写CSS属性名的时候，比如font-size 我们可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit.
vue之v-bind绑定style（对象语法）
兮动人
09-10 4521
注意： key: value 表示时，key可以不加单引号或双引号，但value必须加上，或者直接在定义上加上符号 对象语法案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body&g...
解决vue修改数据绑定的视图不能动态更新的问题
hunt_er的博客
11-23 2439
在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新 这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重新刷新才行。 这样的问题简直不能忍受。。。。 多方查找，才发现 vue文档里有这样一句话。 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。 这句话..
Vue指令中的v-bind之动态更改样式
cattleya_ada的博客
09-29 3981
{{}}不能在html属性中使用，我们要采用v-bind绑定属性。 语法：v-bind:属性名，可以简写为:属性名 每个绑定，都只能包含单个表达式。代码如下： &lt;style&gt; .yuan{ width: 100px; height: 100px; border-radius: 50%; background...
vue 绑定内联样式的写法
丽丽大神ing的博客
06-11 1543
1.对象语法（看官网教程的命名方法，截图如下） CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名 <li :style="{'background-color':bgColor,fontSize:fontSize+'px'}">绑定内联样式对象语法</li> <div v-bind:...
vue 解决ie11兼容问题
热门推荐
fighting2020的博客
10-29 3万+
一、ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser ①npm install --save-dev babel-polyfill ②在main.js中引入 import &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;babel-polyfill&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; ③在build文件夹中webpa
element.style内联样式修改
BOB'S BLOG
02-10 3896
最近在修改我个人博客的一个样式时发现，无论我如何修改style里面的值，页面上的样式都不会被修改，F12检查一下发现个element.style，但是却找不到这个值在哪里，查资料后才知道element.style为内联样式，基本很多都是在JS代码里写死了的，但是我们可以用 !important 语法优先权来实现我们想要的效果。 例如网页上面的进度线条：background: orange; 原来为...
内联样式style-对象语法 ，内联样式style-计算属性语法
lihua130427的博客
10-14 1653
v-bind的用法 v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。 语法格式1：单个语法格式 v-bind:attributeName=variable 语法格式2：对象语法格式 v-bind=“{attributeName1:variable1,attributeName2:variable2,……}” 案例：...
vue bind:style
最新发布
03-14
在Vue中，`v-bind:style`是一个指令，用于绑定元素的内联样式。通过该指令，可以动态地将一个或多个CSS样式属性应用到元素上。 使用`v-bind:style`指令时，可以将一个对象作为参数，对象的属性名表示要应用的CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值