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)文章
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個網(wǎng)頁應(yīng)用,它包括主頁、營銷頁面和應(yīng)用頁面,你不會想要為每一頁重復(fù)所有的工作,對吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔心,這里將向你展示3種簡單的方法來實現(xiàn)這一點,需要的朋友可以參考下2023-08-08
本篇文章主要給大家詳細代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程，對此有興趣的朋友可以學(xué)習(xí)下。2018-02-02
這篇文章主要為大家介紹了Electron-store本地存儲功能的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
在本文里小編給大家整理了關(guān)于VUE路由動態(tài)加載實例代碼以及相關(guān)知識點，需要的朋友們學(xué)習(xí)下。2019-08-08
Vue使用sign-canvas實現(xiàn)在線手寫簽名的實例
sign-canvas?一個基于?canvas?開發(fā),封裝于?Vue?組件的通用手寫簽名板(電子簽名板),支持?pc?端和移動端，本文給大家分享Vue使用sign-canvas實現(xiàn)在線手寫簽名，感興趣的朋友一起看看吧2022-05-05
這篇文章主要介紹了vue中的搜索關(guān)鍵字實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了如何基于Vue開發(fā)一個很火的卡片動畫效果,大致包含兩個效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
Vue實現(xiàn)高德坐標轉(zhuǎn)GPS坐標功能的示例詳解
生活中常用的幾種坐標有：WGS-84、GCJ-02與BD-09。本文將利用Vue實現(xiàn)高德坐標轉(zhuǎn)GPS坐標功能，即實現(xiàn)GCJ-02坐標轉(zhuǎn)換成WGS-84坐標，需要的可以參考一下2022-04-04
今天小編就為大家分享一篇vue-cli項目無法用本機IP訪問的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue面試之new Vue的時候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05