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 面包屑导航 具体实现
Jun 05 Javascript
JS中表单的使用小结
Jan 11 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
Terran剧情介绍
2020/03/14 星际争霸
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
js document.write()使用介绍
2014/02/21 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python简单日志处理类分享
2015/02/14 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
大学学年自我鉴定
2013/10/28 职场文书
会展中心部门工作职责
2013/11/27 职场文书
校园新闻广播稿
2014/01/10 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
Linux磁盘管理方法介绍
2022/06/01 Servers