欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年07月27日 11:24:25   作者：68.  
這篇文章主要給大家介紹了關(guān)于vue動態(tài)添加背景圖的相關(guān)資料,在一些場景下我們需要使用戶可以進(jìn)行自定義背景圖片,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

VUE項(xiàng)目中時(shí)常會有需求，對一個(gè)數(shù)組進(jìn)行循環(huán)渲染，并對其中的每一項(xià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動態(tài)添加背景圖的文章就介紹到這了,更多相關(guān)vue動態(tài)添加背景圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論