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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python中的Numpy入门教程
2014/04/26 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python 以16进制打印输出的方法
2018/07/09 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
AJax面试题
2014/11/25 面试题
Prototype如何更新局部页面
2013/03/03 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
学校门卫工作职责
2013/12/07 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
推荐信怎么写
2014/05/09 职场文书
松材线虫病防治方案
2014/06/15 职场文书
运动会横幅标语
2014/06/17 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
python - timeit 时间模块
2021/04/06 Python
javascript函数式编程基础
2021/09/15 Javascript