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