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 router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue 实现上传组件
May 31 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
js日期联动示例
2014/05/02 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
python输出指定月份日历的方法
2015/04/23 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python实现kNN算法
2017/12/20 Python
numpy基础教程之np.linalg
2019/02/12 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
django中forms组件的使用与注意
2019/07/08 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
利用python实现逐步回归
2020/02/24 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
退休感言
2014/01/28 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
大学英语专业求职信
2014/06/21 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
房产分割协议书范文
2014/11/21 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android