Vue绑定内联样式问题


Posted in Javascript onOctober 17, 2018

使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :style="{ 'color': color, 'fontSize': fontSize + 'px' }"></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color: 'red',
        fontSize: 14
      },
    });
  </script>
</body>
</html>

CSS属性名称使用驼峰命名(camelCase)或短横分隔命名(kebab-case),渲染后的结果为:

<div style="color: red; font-size: 14px">文本</div>

大多数情况下,直接写一串的样式不便于阅读和维护,所以一般写在data或computed里,以data为例写上面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :style="styles"></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color: 'red',
        fontSize: 14 + 'px' 
      },
    });
  </script>
</body>
</html>

应用多个样式对象时,可以使用数组语法:

<div :style="[styleA, styleB]">文本</div>

在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面; 而较为常用的应用是计算属性.

另外,使用:style时,Vue.js会自动给特殊的CSS属性名称增加前缀,比如transform.

总结

以上所述是小编给大家介绍的Vue绑定内联样式问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
js实现电灯开关效果
Jan 19 Javascript
react 应用多入口配置及实践总结
Oct 17 #Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 #Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 #Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 #Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
You might like
js 操作css实现代码
2009/06/11 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python中获取对象信息的方法
2015/04/27 Python
python查看微信好友是否删除自己
2016/12/19 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python上selenium的弹框操作实现
2020/07/13 Python
Python高并发和多线程有什么关系
2020/11/14 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
新学期校长寄语
2014/01/18 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
赔偿协议书范本
2014/09/12 职场文书
2014年营销工作总结
2014/11/22 职场文书
毕业论文致谢词
2015/05/14 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
Hive常用日期格式转换语法
2022/06/25 数据库