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 获取对象 定位子对象
May 31 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
vue debug 二种方法
Sep 16 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
js数组的操作指南
2014/12/28 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
介绍Python中几个常用的类方法
2015/04/08 Python
python 实时遍历日志文件
2016/04/12 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
单位未婚证明范本
2014/01/18 职场文书
教师申诉制度
2014/01/29 职场文书
五年级英语教学反思
2014/01/31 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
横空出世观后感
2015/06/09 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript