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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JavaScript之数组扁平化详解
Jun 03 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
destoon官方标签大全
2014/06/20 PHP
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python从入门到精通(DAY 2)
2015/12/20 Python
用matplotlib画等高线图详解
2017/12/14 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
《乡愁》教学反思
2014/02/18 职场文书
汽车促销活动方案
2014/03/31 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2014年转正工作总结
2014/11/08 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
出生公证书
2015/01/23 职场文书
监理中标通知书
2015/04/16 职场文书
工作简报格式范文
2015/07/21 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书