vue动态添加背景图

VUE中在for循环中给每一项设置动态style背景图

VUE项目中时常会有需求，对一个数组进行循环渲染，并对其中的每一项给不同的背景图片。 首先考虑用到动态style，根据循环中的index变化改变背景图片地址。

一个简单的例子：

简便写法，直接内嵌html样式

<liv-for="(item,index) in list":key="index"><divclass="img-content"><divclass="bagimg bagimg_one"v-if="index == '0'"></div><divclass="bagimg bagimg_two"v-if="index == '1'"></div><divclass="bagimg bagimg_three"v-if="index == '2'"></div><divclass="bag_img"v-if="index>2":style="{'background-image':`url(${require(`./assets/ranking${index+1}.png`)}`}"></div></div></li>

另一种方法，也可以在方法里处理其他逻辑

html中代码如下：

<divclass="bag_img"v-for="(item,index) in list":key="index":style="{'background-image':`url(${getImageUrl(index)})`}">{{item}}</div>

JS中代码如下：

<script>exportdefault{//****省略methods:{getImageUrl(index){// 根据索引生成图像URLreturnrequire(`@/assets/ranking${index+1}.png`);},}};</script>

需要注意，返回的地址外层需要调用require方法，否则webpack打包后会拿不到图片地址，如果是http网络地址则不需要调用该方法。