vue 封装div根据数组有序排列，并调用

一、封装Items

完整代码如下

<template>
	<div class="container">
		<div v-for="(item, index) in items" :key="index" class="item-box">{{ item }}
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				// default: ,
			}
		},
	};
</script>

<style>
	.container {
		/* display: flex; */
		/* 设置容器为flex布局 */
		/* justify-content: space-between; */
		/* 水平居中显示子项 */
	}

	.item-box {
		width: 100px;
		/* 设置每个div的宽度 */
		height: 30px;
		/* 设置每个div的高度 */
		background-color: forestgreen;
		/* 设置每个div的背景色 */
		margin-top: 7px;
		margin-left: 3px;
		/* 设置每个div之间的外边距 */
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22px;
		font-weight: 500;

		border-style: ridge;
		border-width: 2px;
		border-color: #0085AA;
	}
</style>

二、调用Items

<template>
	<div class="Locationmap">
		<Items :items="items1"></Items>
		<Items :items="items2"></Items>
		<Items :items="items3"></Items>
	</div>
</template>

<script>
	import Items from "./Items.vue";
	export default {
		components: {
			Items
		},
		data() {
			return {
				items1: [
					"1-1-1",
					"1-1-2",
					"1-1-3",
					"1-1-4",
					"1-2-1",
					"1-2-2"
				],
				items2: [
					"2-1-1",
					"2-1-2",
					"2-1-3",
					"2-2-1",
					"2-2-2",
					"2-2-3"
				],
				items3: [
					"3-1-1",
					"3-1-2",
					"3-1-3",
					"3-1-4",
					"3-1-5",
					"3-2-1",
					"3-2-2"
				]
			};
		},
	};
</script>


<style scoped>
	.Locationmap {
		position: relative;
		height: 763px;
		width: 100%;
		margin-top: 30px;
		margin-left: 0px;
		display: flex;
	}
</style>

效果如下：