在export default{}中使用data、created，并在html中使用v-for将data中的数据与节点互动

本文介绍了在Vue组件中如何在`export default`块中定义`data()`来创建一个Object类型的数组`arrObject`，然后在`created()`中调用API填充数据。接着详细阐述了如何在HTML的`li`标签中利用`v-for`指令遍历`arrObject`，展示`age`属性，并强调了`v-for`指令配合`:key`属性的重要性，以确保Vue正确地跟踪和更新列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有一个Object类型的数组arrObject，我需要在html标签中循环遍历arrObject，取出arrObject中的age属性

一、data(){}

data在export default的语法结构

export default {
	data(){
		return{}
	}
}

在data中定义arrObject对象

export default {
	data(){
		return{
			arrObject:{}//定义对象的语法结构
			value:''//定义变量的语法结构
		}
	}
}

二、created(){}

created(){}即为create在export default中的语法结构，现调用api接口，将返回的值res传给arrObject

export default {
	data(){
		return{
			arrObject:{}//定义对象的语法结构
			value:''//定义变量的语法结构
		}
	},
	created(){
		this.apiGet(url,data).then((res)=>{
			//此时请求后的数据已经存在了res中
			this.arrObject = res;//将返回的值res传给arrObject
		});
	},
	mounted(){
		//mounted方法在export default中的使用
	},
	methods:{
		show(){
			//methods方法在export default中的使用
		}
	}
}

三、在html的li标签中遍历arrObject

<li v-for = "item in arrObject" :key="item.id">
	<p>{{ item.age }}</p>
	//此时p标签中装入了若干个age，实现了对arrObject的遍历
</li>

四、注解

v-for = "item in arrObject"中，arrObject指源数组，item指被迭代的数组元素的别名，在使用v-for指令时，需要遵从这样的语法结构：

v-for = "别名 in 源数组名"

v-for指令要搭配v-bind:key="“使用，简写为“ :key=” " ”，原因是为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute，如：

<li v-for = "item in arrObject" :key = "item.id"></li>

五、参考

v-for指令讲解：https://cn.vuejs.org/v2/guide/list.html
DOM元素与data数据相关联讲解：https://blog.csdn.net/zrcj0706/article/details/103119901