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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
怎么清空javascript数组
May 11 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript数组排序汇总
Jul 07 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
Preload基础使用方法详解
Feb 03 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
第十四节--命名空间
2006/11/16 PHP
15种PHP Encoder的比较
2007/04/17 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Keras搭建自编码器操作
2020/07/03 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
教学实习自我评价
2014/01/28 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书