v-for循环出不同的背景色或图片

使用场景

通常v-for循环出来的数据都是接口给到的，但是不会有iocn图标，或者设计稿的不同背景色，因此返回数据不同就进行不同颜色或图片变更。

思路

重点是通过v-bind进行绑定class，设置它的[index],在data里面进行定义，样式里面进行引入需要的背景图或者color样式，如果是背景图也同背景色写法。

<div
        class="icon"
        :class="color[index]"
      ></div>

data(){
	return{
		color: ["colorOne", "colorTwo", "colorThere"],
	}
}

全部代码

<template>
  <div class="demo">
    <div
      class="box"
      v-for="(item,index) in list"
      :key="index"
    >
      <div
        class="icon"
        :class="color[index]"
      ></div>
      <div>{{item.name}}:{{item.age}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: ["colorOne", "colorTwo", "colorThere"],
      list: [
        { name: "小红", age: "18" },
        { name: "小白", age: "22" },
        { name: "大胖", age: "31" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.demo {
  width: 500px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  .box {
    display: flex;
    
    .icon {
      width: 50px;
      height: 50px;
    }
    .colorOne {
      background: red;
    }
    .colorTwo {
      background: blue;
    }
    .colorThere {
      background: skyblue;
    }
  }
}
</style>

效果图