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最简单的拖拽效果实现代码
Sep 24 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
js数组去重的N种方法(小结)
Jun 07 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
JS中定位 position 的使用实例代码
2017/08/06 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
vue弹窗插件实战代码
2018/09/08 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
前端深入理解Typescript泛型概念
2020/03/09 Javascript
vue实现购物车加减
2020/05/30 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python的即时标记项目练习笔记
2014/09/18 Python
python先序遍历二叉树问题
2017/11/10 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
简述python Scrapy框架
2020/08/17 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
学生打架检讨书大全
2014/01/23 职场文书
给校长的建议书500字
2014/05/15 职场文书
创先争优一句话承诺
2014/05/29 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
死亡赔偿协议书
2015/01/28 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android