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')}"- 數組
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'] }"以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue插件mescroll.js實現移動端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實現移動端上拉加載和下拉刷新，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue.js內部自定義指令與全局自定義指令的實現詳解（利用directive）
這篇文章主要給大家介紹了關于vue.js內部自定義指令與全局自定義指令的實現方法，vue.js中實現自定義指令的主要是利用directive，directive這個單詞是我們寫自定義指令的關鍵字，需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下2019-05-05
Vue.js如何利用v-for循環(huán)生成動態(tài)標簽
這篇文章主要給大家介紹了關于Vue.js如何利用v-for循環(huán)生成動態(tài)標簽的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
在我們實際項目開發(fā)過程中，會非常頻繁地和 Vue 組件的生命周期打交道，接下來我們就從源碼的角度來看一下這些生命周期的鉤子函數是如何被執(zhí)行的,需要的朋友可以參考下面文章內容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中實現禁止屏幕滾動,禁止屏幕滑動，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue+axios+promise實際開發(fā)用法詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10