【无标题】vue+uni 背景色随机或者按照数组来展示

这里是引用
引用了http://t.csdnimg.cn/oK8W1这位作者的颜色

下面是效果

<view class="content">
	<view class="content_box" :style="{'background':item.color}" v-for="(item, index) in courseList"
		:key="index" @click="goRecords(item)">
		<view class="content_title">
			{{item.name}}
		</view>
	</view>
</view>

getList() {
	this.courseList = []
	for (var i = 0; i < 10; i++) {
		this.courseList.push({
			name: '这是演示模板',
			img: '',
			color: ''
		})
	}
	var color = ['#ECAD9E', '#F4606C', '#19CAAD', '#8CC7B5', '#A0EEE1',
		'#BEE7E9', '#BEEDC7', '#D6D5B7', '#D1BA74', '#E6CEAC'
	]
	this.courseList.map((item, index) => {
		let colorIndex = Math.floor(index / (this.courseList.length / color.length))
		// let colorIndex = Math.floor(Math.random()*10)
		item.color = color[colorIndex]
	})
	console.log(this.courseList)
},

<style lang="scss" scoped>

	.content {
		display: flex;
		padding: 20px;
		flex-wrap: wrap;
		box-sizing: border-box;
		justify-content: space-between;
		flex-direction: row;

		.content_box {
			box-sizing: border-box;
			width: 48%;
			height: 150px;
			padding: 0 5%;
			margin: 2% 0;
			border-radius: 5px;
			border: 1px solid #eeee;
			display: block;
			position: relative;

			.content_title {
				position: absolute;
				bottom: 0px;
				color: white;
				background: rgba(0, 0, 0, 0.2);
				width: 100%;
				left: 0;
				padding: 5px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				box-sizing: border-box;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 13px;
			}

		}

	}
</style>