vue動(dòng)態(tài)添加背景圖簡單示例
更新時(shí)間：2023年07月27日 11:24:25 作者：68.
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加背景圖的相關(guān)資料,在一些場景下我們需要使用戶可以進(jìn)行自定義背景圖片,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
VUE中在for循環(huán)中給每一項(xiàng)設(shè)置動(dòng)態(tài)style背景圖
VUE項(xiàng)目中時(shí)常會有需求，對一個(gè)數(shù)組進(jìn)行循環(huán)渲染，并對其中的每一項(xiàng)給不同的背景圖片。 首先考慮用到動(dòng)態(tài)style，根據(jù)循環(huán)中的index變化改變背景圖片地址。
一個(gè)簡單的例子：
簡便寫法，直接內(nèi)嵌html樣式
<li v-for="(item,index) in list" :key="index">
<div class="img-content">
<div class="bagimg bagimg_one" v-if="index == '0'"></div>
<div class="bagimg bagimg_two" v-if="index == '1'"></div>
<div class="bagimg bagimg_three" v-if="index == '2'"></div>
<div class="bag_img" v-if="index>2" :style="{'background-image':`url(${require(`./assets/ranking${index+1}.png`)}`}"></div>
</div>
</li>另一種方法，也可以在方法里處理其他邏輯
html中代碼如下：
<div class="bag_img" v-for="(item,index) in list" :key="index" :style="{'background-image':`url(${getImageUrl(index)})`}" >{{item}}</div>JS中代碼如下：
<script>
export default {
//****省略
methods:{
getImageUrl(index) {
// 根據(jù)索引生成圖像URL
return require(`@/assets/ranking${index+1}.png`);
},
}
};
</script>需要注意，返回的地址外層需要調(diào)用require方法，否則webpack打包后會拿不到圖片地址，如果是http網(wǎng)絡(luò)地址則不需要調(diào)用該方法。
總結(jié)
到此這篇關(guān)于vue動(dòng)態(tài)添加背景圖的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)添加背景圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
vue/cli?配置動(dòng)態(tài)代理無需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，分為vue?init?webpack-simple?項(xiàng)目名和vue?init?webpack?項(xiàng)目名兩種，這篇文章主要介紹了vue/cli?配置動(dòng)態(tài)代理，無需重啟服務(wù),需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁欄效果，分頁欄設(shè)計(jì)的步驟與實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了Vue插件之滑動(dòng)驗(yàn)證碼用法,結(jié)合實(shí)例形式詳細(xì)分析了Vue滑動(dòng)驗(yàn)證碼插件相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
本文給大家介紹Vue中插槽(Slot)用法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-10-10
Vue的computed和watch都是響應(yīng)式系統(tǒng)的重要組成部分,computed通過依賴緩存提高性能,而watch用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行副作用,兩者核心機(jī)制不同,而watch則是監(jiān)聽變化并觸發(fā)回調(diào),本文介紹Vue中的computed和watch的原理,感興趣的朋友跟隨小編一起看看吧2025-12-12
今天小編就為大家分享一篇vue data引入本地圖片的兩種方式小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue 使用print-js 打印渲染不出來問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10