vue動(dòng)態(tài)添加背景圖簡(jiǎn)單示例
VUE中在for循環(huán)中給每一項(xiàng)設(shè)置動(dòng)態(tài)style背景圖
VUE項(xiàng)目中時(shí)常會(huì)有需求，對(duì)一個(gè)數(shù)組進(jìn)行循環(huán)渲染，并對(duì)其中的每一項(xiàng)給不同的背景圖片。 首先考慮用到動(dòng)態(tài)style，根據(jù)循環(huán)中的index變化改變背景圖片地址。
一個(gè)簡(jiǎn)單的例子：
簡(jiǎn)便寫(xiě)法，直接內(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打包后會(huì)拿不到圖片地址，如果是http網(wǎng)絡(luò)地址則不需要調(diào)用該方法。
總結(jié)
到此這篇關(guān)于vue動(dòng)態(tài)添加背景圖的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)添加背景圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于vue+h5實(shí)現(xiàn)車牌號(hào)輸入框功能(demo)
最近開(kāi)發(fā)項(xiàng)目是學(xué)校校內(nèi)車輛超速方面的統(tǒng)計(jì)檢測(cè)方面的系統(tǒng),在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)有個(gè)小功能,就是用戶移動(dòng)端添加車牌號(hào),剛開(kāi)始想著輸入框,提交時(shí)正則效驗(yàn)一下格式,最后感覺(jué)不方便,所以就簡(jiǎn)單自己手寫(xiě)了一個(gè)H5車牌號(hào)軟鍵盤,對(duì)vue車牌號(hào)輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧2025-03-03
vue使用svg文件補(bǔ)充-svg放大縮小操作(使用d3.js)
這篇文章主要介紹了vue使用svg文件補(bǔ)充-svg放大縮小操作(使用d3.js)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
關(guān)于vue的npm run dev和npm run build的區(qū)別介紹
這篇文章主要介紹了關(guān)于vue的npm run dev和npm run build的區(qū)別介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)
這篇文章主要為大家介紹了vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue element 生成無(wú)線級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 生成無(wú)線級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))
這篇文章主要介紹了vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面
這篇文章主要介紹了vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了寫(xiě)一個(gè)Vue Popup組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue中filter的應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了vue中filter的應(yīng)用場(chǎng)景，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11