vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解
更新時間：2018年09月03日 10:07:15 作者：Baby_加油_
今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題：使用vue加載圖片變量，為了圖片的自適應(yīng)，需設(shè)置為背景圖居中排布
<tr v-for="(item,index) in dataObj">
<td class="video-msg" v-bind:id="item.videoid">
<div class="videoImg fl" v-bind:style="{backgroundImage:'url(' + item.videopic + ')'}">
</div>
</td>
<td v-if="item.videoisdel == 3">審核中</td>
<td>{{item.publishdate}}</td>
<td>sss
<button class="delete" @click='delConfirm(item.videoid)'>刪除</button>
</td>
</tr>
行內(nèi)樣式的寫法：
v-bind:style="{backgroundImage:'url(' + item.videopic + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
以上這篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue兩組件間值傳遞 $router.push實現(xiàn)方法
兩組件間傳值，可能包含多種情況，這篇文章主要介紹了vue兩組件間值傳遞 $router.push實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue3中動態(tài)獲取高寬,實現(xiàn)思路大概是將監(jiān)聽到的高度賦給你需要設(shè)置的對象，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友一起看看吧2023-10-10
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細(xì)的介紹一下2021-09-09
使用vue實現(xiàn)grid-layout功能實例代碼
這篇文章主要介紹了使用vue實現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vue3播放m3u8視頻的兩種實現(xiàn)方式,兩種視頻播放器組件分別是vue3-video-play和chimee-player,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
vue3使用自定義指令實現(xiàn)el dialog拖拽功能示例詳解
這篇文章主要為大家介紹了vue3使用自定義指令實現(xiàn)el dialog拖拽功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue使用過濾器格式化日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了vue中router-view組件的使用,這個時候我們就需要用到路由中的 router-view組件（也叫路由占位符）了，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue祖孫組件如何實現(xiàn)傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12