vue動態(tài)添加背景圖簡單示例

更新時間：2023年07月27日 11:24:25 作者：68.

這篇文章主要給大家介紹了關于vue動態(tài)添加背景圖的相關資料,在一些場景下我們需要使用戶可以進行自定義背景圖片,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

VUE中在for循環(huán)中給每一項設置動態(tài)style背景圖

VUE項目中時常會有需求，對一個數(shù)組進行循環(huán)渲染，并對其中的每一項給不同的背景圖片。首先考慮用到動態(tài)style，根據(jù)循環(huán)中的index變化改變背景圖片地址。

一個簡單的例子：

簡便寫法，直接內(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)絡地址則不需要調(diào)用該方法。

總結(jié)

到此這篇關于vue動態(tài)添加背景圖的文章就介紹到這了,更多相關vue動態(tài)添加背景圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

基于vue+h5實現(xiàn)車牌號輸入框功能(demo)
最近開發(fā)項目是學校校內(nèi)車輛超速方面的統(tǒng)計檢測方面的系統(tǒng),在開發(fā)過程中發(fā)現(xiàn)有個小功能,就是用戶移動端添加車牌號,剛開始想著輸入框,提交時正則效驗一下格式,最后感覺不方便,所以就簡單自己手寫了一個H5車牌號軟鍵盤,對vue車牌號輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧
2025-03-03
vue使用svg文件補充-svg放大縮小操作(使用d3.js)
這篇文章主要介紹了vue使用svg文件補充-svg放大縮小操作(使用d3.js)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
關于vue的npm run dev和npm run build的區(qū)別介紹
這篇文章主要介紹了關于vue的npm run dev和npm run build的區(qū)別介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法
今天小編就為大家分享一篇vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue設計與實現(xiàn)合理的觸發(fā)響應
這篇文章主要為大家介紹了vue設計與實現(xiàn)合理的觸發(fā)響應示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
vue element 生成無線級左側(cè)菜單的實現(xiàn)代碼
這篇文章主要介紹了vue element 生成無線級左側(cè)菜單的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue如何點擊多個tab標簽打開關閉多個頁面
這篇文章主要介紹了vue如何點擊多個tab標簽打開關閉多個頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
寫一個Vue Popup組件
這篇文章主要介紹了寫一個Vue Popup組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-02-02
vue中filter的應用場景詳解
這篇文章主要為大家介紹了vue中filter的應用場景，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11