vue中的style樣式如何動(dòng)態(tài)綁定
更新時(shí)間：2022年04月20日 16:46:36 作者：酷jjs
這篇文章主要介紹了vue中的style樣式如何動(dòng)態(tài)綁定，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
style樣式如何動(dòng)態(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;
?}動(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學(xué)習(xí)筆記之Vue中css動(dòng)畫原理簡(jiǎn)單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了Vue3中使用富文本編輯器的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下2023-10-10
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
vue 項(xiàng)目build錯(cuò)誤異常的解決方法
這篇文章主要介紹了vue build錯(cuò)誤異常的解決方法 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對(duì)大家的項(xiàng)目來(lái)說(shuō)非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下2024-01-01
Vue中的三種Props:模板Props、配置Props和狀態(tài)Props詳解
這篇文章介紹了Vue中的Props,主要有三種類型：模板Props、配置Props和狀態(tài)Props,模板Props用于簡(jiǎn)單的數(shù)據(jù)傳遞和顯示,配置Props用于調(diào)整組件的行為和外觀,狀態(tài)Props用于管理組件內(nèi)部的動(dòng)態(tài)數(shù)據(jù),每種類型都有其應(yīng)用場(chǎng)景,理解這些類型可以幫助你設(shè)計(jì)出更棒的組件2025-02-02
這篇文章主要介紹了vue對(duì)枚舉值轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3使用element-plus組件不顯示問(wèn)題
這篇文章主要介紹了Vue3使用element-plus組件不顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實(shí)現(xiàn)
當(dāng)面對(duì)大量數(shù)據(jù)時(shí),一次性加載所有數(shù)據(jù)可能會(huì)導(dǎo)致性能問(wèn)題,我們可以實(shí)現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
Vue學(xué)習(xí)之a(chǎn)xios的使用方法實(shí)例分析
這篇文章主要介紹了Vue學(xué)習(xí)之a(chǎn)xios的使用方法,結(jié)合實(shí)例形式分析了vue.js axios庫(kù)的功能及網(wǎng)絡(luò)請(qǐng)求相關(guān)操作技巧,需要的朋友可以參考下2020-01-01