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 相关文章推荐
vue3.0实现插件封装
Dec 14 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
收藏的一个php小偷的核心程序
2007/04/09 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
JQuery球队选择实例
2015/05/18 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python创建进程fork用法
2015/06/04 Python
在Django的session中使用User对象的方法
2015/07/23 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
jupyter实现重新加载模块
2020/04/16 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
高级电工工作职责
2013/11/21 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
售后服务承诺书模板
2014/05/21 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
科学育儿宣传标语
2014/10/08 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
天堂的孩子观后感
2015/06/11 职场文书
2017新年晚会开幕词
2016/03/03 职场文书