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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 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
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
详解webpack 入门与解析
2018/04/09 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python的多重继承的理解
2017/08/06 Python
python中import reload __import__的区别详解
2017/10/16 Python
wxPython的安装与使用教程
2018/08/31 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
人事主管的岗位职责
2013/11/16 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
欢迎家长标语
2014/10/08 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python