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