目录style样式如何动态绑定动态设置style样式style样式如何动态绑定 方法一： (1) html中: <div class="videoMa" ref="video
(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属性名都要变成驼峰式，比如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'] }"以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue中的style样式如何动态绑定
本文链接: https://www.lsjlt.com/news/146700.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0