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的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
ES6数组与对象的解构赋值详解
Jun 14 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数组应该有多大的分析
2009/07/30 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
phpStorm2020 注册码
2020/09/17 PHP
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python代码调试的几种方法总结
2015/04/15 Python
python使用RNN实现文本分类
2018/05/24 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
社会学专业求职信
2014/02/24 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
工作推荐信范文
2014/05/10 职场文书
演讲稿格式范文
2014/05/19 职场文书
教学督导岗位职责
2015/04/10 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers