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进行进制转换将字符串转换为十进制
Sep 21 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
在vue中使用console.log无效的解决
Aug 09 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
汉字转化为拼音(php版)
2006/10/09 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php封装的验证码类分享
2017/02/26 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
JS实现小星星特效
2019/12/24 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python实现dict版图遍历示例
2014/02/19 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python选择排序算法实例总结
2015/07/01 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python 图像增强算法实现详解
2021/01/24 Python
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
运动会领导邀请函
2014/02/05 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
股指期货心得体会
2014/09/13 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers