VUE中在for循环中给每一项设置动态style背景图VUE项目中时常会有需求，对一个数组进行循环渲染，并对其中的每一项

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

个人觉得较好的方法

html中代码如下：

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

JS中代码如下：

<script>
export default {
  //****省略
  methods:{
    getImageUrl(index) {
      // 根据索引生成图像 URL
      return require(`@/assets/a${index+1}.png`);
    },
  }
};
</script>

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

简便写法，直接写到html结构中

html中代码如下：

<div class="bagimg num" v-if="key>2" :style="{ 'background-image': 'url('+require(`./assets/ranking${key+1}.png`)+')'}"></div>

此处style中的css属性名可以不加引号直接使用小驼峰写法（如backgroundImage），属性值中的+号为拼接字符串的作用，容易让人误解。