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一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
微信小程序 教程之模板
Oct 18 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
python 调用HBase的简单实例
2016/12/18 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python线程指南分享
2019/11/19 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
自主招生自荐信
2013/12/08 职场文书
公司道歉信范文
2014/01/09 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
小学安全汇报材料
2014/08/14 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
创业计划书之水果店
2019/07/18 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Python实现视频自动打码的示例代码
2022/04/08 Python