vue动态绑定style样式


Posted in Vue.js onApril 20, 2022

style样式如何动态绑定

  • 方法一:

(1) html中:

 <div class="videoMa" ref="videoMa" style="width:100%;height:100%;">
 <div id="playWnd" class="playWnd"  :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"></div>
 </div>

(2) data中:

 videoBox:{
       width:800,
       height:500,
     }

(3)mounted中:

  mounted() {
      this.videoBox.width=this.$refs.videoMa.offsetWidth;
      this.videoBox.height=this.$refs.videoMa.offsetHeight;
 }

动态设置style样式

凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize

除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

  • 对象
html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
html :style="{display:(activeName=='first'?'flex':'none')}"
  • 数组
html :style="[baseStyles, overridingStyles]"
html :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]"
  • 三目运算符
html :style="{color:(index==0?conFontColor:'#ddd')}"
html :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"
  • 多重值
html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
Vue.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
vue特效之翻牌动画
Apr 20 #Vue.js
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
You might like
3.从实例开始
2006/10/09 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
php显示页码分页类的封装
2017/06/08 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
学生实习自我鉴定
2013/10/11 职场文书
银行服务感言
2014/03/01 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
学生会主席任命书
2015/09/21 职场文书
四年级作文之植物
2019/09/20 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技