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

動(dòng)態(tài)設(shè)置style樣式

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

除了綁定值，其他的屬性名的值要用引號(hào)括起來(lái)，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

對(duì)象

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'}]"

三目運(yùn)算符

html :style="{color:(index==0?conFontColor:'#ddd')}"
html :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"

多重值

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

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

您可能感興趣的文章:

相關(guān)文章

vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
vue.js內(nèi)部自定義指令與全局自定義指令的實(shí)現(xiàn)詳解（利用directive）
這篇文章主要給大家介紹了關(guān)于vue.js內(nèi)部自定義指令與全局自定義指令的實(shí)現(xiàn)方法，vue.js中實(shí)現(xiàn)自定義指令的主要是利用directive，directive這個(gè)單詞是我們寫(xiě)自定義指令的關(guān)鍵字，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
vue里的data要用return返回的原因淺析
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下
2019-05-05
Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽
這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-01-01
一文帶你理解 Vue 中的生命周期
在我們實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)非常頻繁地和 Vue 組件的生命周期打交道，接下來(lái)我們就從源碼的角度來(lái)看一下這些生命周期的鉤子函數(shù)是如何被執(zhí)行的,需要的朋友可以參考下面文章內(nèi)容
2021-09-09
詳解vue-socket.io使用教程與踩坑記錄
本文主要介紹了vue-socket.io使用教程與踩坑記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
webstorm提示?@路徑?Module?is?not?installed的問(wèn)題
這篇文章主要介紹了webstorm提示?@路徑?Module?is?not?installed的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-11-11
vueRouter--matcher之動(dòng)態(tài)增減路由方式
這篇文章主要介紹了vueRouter--matcher之動(dòng)態(tài)增減路由方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue+axios+promise實(shí)際開(kāi)發(fā)用法詳解
這篇文章主要介紹了vue+axios+promise實(shí)際開(kāi)發(fā)用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10