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

最新推荐文章于 2023-10-23 16:39:28 发布

原创最新推荐文章于 2023-10-23 16:39:28 发布 · 2.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue项目中使用v-for循环结合v-bind动态绑定class来实现图标和背景颜色的变化，通过实例展示了如何根据不同数据项设置不同的样式。

使用场景

通常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>

效果图

在这里插入图片描述