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

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

一个简单的例子:
在这里插入图片描述

简便写法,直接内嵌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) {
	  // 根据索引生成图像URL
      return require(`@/assets/ranking${index+1}.png`);
    },
  }
};
</script>

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐