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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
jQuery插件的写法分享
Jun 12 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
javascript实现电商放大镜效果
Nov 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分页示例代码
2007/03/19 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
jquery replace方法去空格
2017/05/08 jQuery
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python连接mongodb集群方法详解
2020/02/13 Python
python爬虫请求头设置代码
2020/07/28 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
高一化学教学反思
2014/02/05 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js