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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
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运算符的知识大全
2011/11/03 PHP
PHP实现搜索相似图片
2015/09/22 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
numpy中矩阵合并的实例
2018/06/15 Python
python中退出多层循环的方法
2018/11/27 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
致100米运动员广播稿
2014/02/14 职场文书
人事经理岗位职责
2014/04/28 职场文书
大班幼儿评语大全
2014/04/30 职场文书
项目合作意向书模板
2014/07/29 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
编写python程序的90条建议
2021/04/14 Python