今天小编给大家分享一下vue中的style样式怎么动态绑定的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
style样式如何动态绑定
-
方法一:
(1) html中:
<div class="videoMa" ref="videoMa" > <div id="playWnd" class="playWnd" :></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 : html :
-
数组
html : html :
-
三目运算符
html : html :
-
多重值
html :
以上就是“vue中的style样式怎么动态绑定”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注云搜网行业资讯频道。