vue實現(xiàn)動態(tài)綁定行內(nèi)樣式style的backgroundImage
更新時間：2024年07月26日 14:19:57 作者：CoderLonely
這篇文章主要介紹了vue實現(xiàn)動態(tài)綁定行內(nèi)樣式style的backgroundImage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue動態(tài)綁定行內(nèi)樣式style的backgroundImage
最近遇到這個問題：在網(wǎng)上找了找
比如我有很多張圖片，想v-for時在每一個div上添加一個隨機的背景圖片，實現(xiàn)如下效果：
有兩點需要注意：
- 一是文件路徑不能直接使用，而要使用require
- 二是去拼接“url(文件路徑)”，還需要注意要對style進行數(shù)據(jù)綁定
<div v-for="item in items" :key="item.id"
:style="{backgroundImage:'url('+bgimgs[random()].img+')'}">
</div>
data(){
return {
//用于隨機生成背景圖片的文件路徑列表
bgimgs:[
{img:require("../assets/imgs/background_imgs/1.png")},
{img:require("../assets/imgs/background_imgs/2.png")},
{img:require("../assets/imgs/background_imgs/3.png")},
{img:require("../assets/imgs/background_imgs/4.png")},
{img:require("../assets/imgs/background_imgs/5.jpg")},
{img:require("../assets/imgs/background_imgs/6.jpg")},
{img:require("../assets/imgs/background_imgs/7.jpg")},
{img:require("../assets/imgs/background_imgs/8.jpg")},
]
}
}
style background變量vue
style的background設(shè)置變量
:style="{background: (index+1)==actBar?'url(img/'+item.num+'_active.png) no-repeat':'url(img/'+item.num+'.png) no-repeat'}"
:style="'background-image: url(' + item.appface+')'"
:style="'background-image: url('+'img/level/ml/'+girlCharm(item.level)+'.png'+')'"
:style="'background-image: url('+'/static/img/'+item.domainBg+'.png'+')'">img的src設(shè)置變量
:src="'img/act1_'+dataList.sex+'rule.png'"
style的width設(shè)置變量
:style="{width: giftLen + '%'}"總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長一段時間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免2023-03-03
基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)下拉加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細介紹了vue定義模態(tài)框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Pinia 是2019年由vue.js官方成員重新設(shè)計的新一代狀態(tài)管理庫,類似Vuex,下面我們就來學(xué)習(xí)一下如何通過Pinia實現(xiàn)持久化存儲的相關(guān)知識,感興趣的小伙伴可以了解下2023-12-12
vue用戶長時間不操作退出到登錄頁的兩種實現(xiàn)方式
出于安全考慮，用戶長時間不操作，就回到登錄頁面，讓用戶重新登錄，本文就記錄一下實現(xiàn)這種效果的兩種方式，具有一定的參考價值，感興趣的可以了解一下2021-09-09
本文主要介紹了element中drawer模板的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue 如何實現(xiàn)拖拽動態(tài)生成組件的需求，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時，攜帶參數(shù)跳轉(zhuǎn)，本文將詳細介紹vue路由傳參的三種方式，這三種傳參方式只是針對vue?Router?V3版本的,需要的朋友可以參考下2023-07-07
element tree樹形組件回顯數(shù)據(jù)問題解決
本文主要介紹了element tree樹形組件回顯數(shù)據(jù)問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08