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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
vue修改Element的el-table样式的4种方法
Sep 17 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
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python 监测文件是否更新的方法
2019/06/10 Python
logging level级别介绍
2020/02/21 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
explicit和implicit的含义
2012/11/15 面试题
财务会计实习报告体会
2013/12/20 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
青年文明号事迹材料
2014/01/18 职场文书
学校消防安全制度
2014/01/30 职场文书
监察建议书格式
2014/05/19 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书