话不多说，都在代码里，看懂多少看个人。

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	interface arrObj{
		id:number,
		name?:string
	}
	const arr=ref<arrObj[]>([{id:0,name:"小明"}])
	const addOne=()=>{
		arr.value.push({id:arr.value.length,name:"小白"})
	}
	const alert1=(row:arrObj)=>{
		alert(row.name)
	}
	const map:arrObj=reactive({
		id:1,
		name:"你好"
	})
</script>
<template>
	<div class="box">
		<h3></h3>
		<div>
			<input type="button" value="新增" @click="addOne"/>
			arr第一种循环:<br/>
			<p v-for="item of arr" :key="item.id" @click="alert1(item)">{{item.id}}</p>
			arr第二种循环:<br/>
			<p v-for="{id,name} of arr" :key="id" @click="alert1({id,name})">{{name}}</p>
			<br/>
			map:
			<br/>
			<p v-for="(item,key,index) in map"  >{{key+"的值是"+item+",索引是"+index}}</p>
		</div>
	</div>
	
</template>
<style>
	.box{display: block;text-align:center;margin: 50px 0 0;}
	.ml_10{margin-left:10px}
	.bor_red{border:1px red solid;}
	.bor_bg{background: blue;}
</style>