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 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
谈谈JavaScript中的垃圾回收机制
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
我的论坛源代码(七)
2006/10/09 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python 网络编程常用代码段
2016/08/28 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python如何统计序列中元素
2020/07/31 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python3运算符常见用法分析
2020/02/14 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
thinkphp5 路由分发原理
2021/03/18 PHP
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
super关键字的用法
2012/04/10 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
青年文明号复核材料
2014/02/11 职场文书
师范生见习报告
2014/10/31 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
浅谈Python中对象是如何被调用的
2022/04/06 Python