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