利用for循环和flex布局同时做多个样式大致相同内容不同的div盒子，:style=“`background: url(${item.img})`“添加盒子的不同背景图片

实现目标：采用for循环取数组中的数据，结合flex布局生成多个盒子，减少代码冗余。

实现效果：

实现方法：

1.template中：这里涉及到图片的添加，直接采用img标签，以及背景图片的添加，是采用:style="`background: url(${item.img})`"的形式。

<div class="box">
			<div class="box-content" v-for="(item, index) in statistic" :key="index" :style="`background: url(${item.img})`">
				<div style="display: flex; height: 69.5px">
					<img :src="item.image" alt="" class="box-img" />
					<div style="display: style">
						<div class="box-title">{{ item.name }}</div>
						<div style="display: flex">
							<div class="box-num">{{ item.num }}</div>
							<div class="box-unit">万</div>
						</div>
					</div>
				</div>
				<div style="display: flex" class="box-num-day">
					<div style="margin-right: 15px">今日&nbsp;&nbsp;{{ item.todayNum }}</div>
					<div>/</div>
					<div style="margin-left: 15px">昨日&nbsp;&nbsp;{{ item.yesterdayNum }}</div>
				</div>
			</div>
		</div>

2.script的data中：

statistic: [
				{ name: '王俊凯', img: require('@/assets/images/xxx/BG.png'), image: require('@/assets/images/xxxx/rair1.png'), num: '8080', todayNum: '12', yesterdayNum: '12' },
				{ name: '王 源', img: require('@/assets/images/xxxx/BG.png'), image: require('@/assets/images/xxxx/rair2.png'), num: '8081', todayNum: '12', yesterdayNum: '12' },
				{ name: '易烊千玺', img: require('@/assets/images/xxxxx/BG.png'), image: require('@/assets/images/xxxx/rair3.png'), num: '8082', todayNum: '12', yesterdayNum: '12' }
			],

3.style中：

.box {
		display: flex;
		flex: 1;
		position: fixed;
		top: 21%;
		left: 33%;
		width: 807px;
		height: 105px;
		.box-content {
			width: 184px;
			height: 105px;
			margin-right: 80px;
			.box-title {
				padding: 10px 0 0 15px;
				height: 30px;
				line-height: 30px;
				color: #c2dbff;
				font-size: 16px;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
				font-weight: 400;
			}
			.box-img {
				display: flex;
				width: 36px;
				height: 36px;
				margin: 22px 0 0 20px;
			}
			.box-num {
				font-size: 19px;
				font-family: Zen Dots, Zen Dots-Regular;
				font-weight: 700;
				color: #ffffff;
				padding-left: 15px;
				width: 75px;
				box-sizing: border-box;
			}
			.box-unit {
				font-size: 12px;
				font-family: Source Sans Pro, Source Sans Pro-Regular;
				font-weight: 400;
				text-align: LEFT;
				color: #ffffff;
				margin: auto;
			}
			.box-num-day {
				font-size: 12px;
				font-family: Source Sans Pro, Source Sans Pro-Regular;
				font-weight: 400;
				text-align: CENTER;
				color: rgba(255, 255, 255, 0.7);
				margin: 5px 20px 5px 23px;
			}
		}
	}