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 解析多维的Json数据格式
Nov 02 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
Vue实现简易购物车页面
Dec 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
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
this和执行上下文实现代码
2010/07/01 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
python集合类型用法分析
2015/04/08 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
现场施工员岗位职责
2014/03/10 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
自我检讨报告
2015/01/28 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书