欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的style樣式如何動態(tài)綁定

 更新時間：2022年04月20日 16:46:36   作者：酷jjs  
這篇文章主要介紹了vue中的style樣式如何動態(tài)綁定，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

style樣式如何動態(tài)綁定

  • 方法一：

(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;
?}

動態(tài)設置style樣式

凡是有-的style屬性名都要變成駝峰式，比如font-size要變成fontSize

除了綁定值，其他的屬性名的值要用引號括起來，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

  • 對象
html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
html :style="{display:(activeName=='first'?'flex':'none')}"
  • 數(shù)組
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'] }"

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論