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