使用场景
通常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>