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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
jQuery的三种$()
Dec 30 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
JavaScript两种计时器的实例讲解
Jan 31 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
phpize的深入理解
2013/06/03 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
php中使用GD库做验证码
2016/03/31 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python实现与redis交互操作详解
2020/04/21 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
什么是servlet
2012/05/08 面试题
师范生自荐信范文
2013/10/06 职场文书
营销总经理岗位职责
2014/02/02 职场文书