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,超强推荐share.js
Dec 23 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
js实现简单选项卡制作
Aug 05 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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生成指定随机字符串的简单实现方法
2015/04/01 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python输入多行字符串的方法总结
2019/07/02 Python
python模拟斗地主发牌
2020/04/22 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
诉讼授权委托书
2014/10/15 职场文书
努力工作保证书
2015/02/28 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书