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

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

一、data(){}

1. data在export default的语法结构

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

2. 在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
		});
	},
	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>

四、注解

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

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

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

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

五、参考

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