vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解

更新時(shí)間：2018年09月03日 10:07:15 作者：Baby_加油_

今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

問題：使用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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
兩組件間傳值，可能包含多種情況，這篇文章主要介紹了vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
Vue?3?中動(dòng)態(tài)獲取高寬的思路詳解
這篇文章主要介紹了Vue3中動(dòng)態(tài)獲取高寬,實(shí)現(xiàn)思路大概是將監(jiān)聽到的高度賦給你需要設(shè)置的對(duì)象，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友一起看看吧
2023-10-10
Element表格表頭行高問題解決
在最近一個(gè)項(xiàng)目的后臺(tái)管理系統(tǒng)中，寫前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細(xì)的介紹一下
2021-09-09
使用vue實(shí)現(xiàn)grid-layout功能實(shí)例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下
2018-01-01
Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式示例
這篇文章主要介紹了Vue3播放m3u8視頻的兩種實(shí)現(xiàn)方式,兩種視頻播放器組件分別是vue3-video-play和chimee-player,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
vue3使用自定義指令實(shí)現(xiàn)el dialog拖拽功能示例詳解
這篇文章主要為大家介紹了vue3使用自定義指令實(shí)現(xiàn)el dialog拖拽功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue使用過濾器格式化日期
這篇文章主要為大家詳細(xì)介紹了vue使用過濾器格式化日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
vue中router-view組件的使用詳解
這篇文章主要介紹了vue中router-view組件的使用,這個(gè)時(shí)候我們就需要用到路由中的 router-view組件（也叫路由占位符）了，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2021-10-10
Vue祖孫組件如何實(shí)現(xiàn)傳值
這篇文章主要介紹了Vue祖孫組件如何實(shí)現(xiàn)傳值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue生成gzip壓縮包部署到nginx的示例
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下
2022-12-12