<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的列表渲染</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- key值是惟一的 -->
		<!-- 
		 vue对数组的操作方法
		 push()  往数组最后面添加一个元素，成功返回当前数组的长度
		 pop()  删除数组的最后一个元素，成功返回删除元素的值
		 shift()  删除数组的第一个元素，成功返回删除元素的值
		 unshift()  往数组最前面添加一个元素，成功返回当前数组的长度
		 splice()  有三个参数，第一个是想要删除的元素的下标（必选），
				   第二个是想要删除的个数（必选），
				   第三个是删除后想要在原位置替换的值（可选）
		 sort()  使数组按照字符编码默认从小到大排序,成功返回排序后的数组
		 reverse()  将数组倒序，成功返回倒序后的数组
		 -->
		 
		 <!-- 动态修改数组中或对象中的数据可以用
		 Vue.set(数组或对象，键key，值value)方法或者
		 vm.$set(数组或对象，键key，值value)方法
		 例子：Vue.set(vm.userInfo,"address","beijing")
		 -->
		 
		 <!-- template是模板占位符-->
		<div id="app">
			<div v-for="(item,index) of list" 
				 :key="item.id">
				{{item.text}}----{{index}}
			</div>
		</div>
		<script>
			var vm =new Vue({
				el:"#app",
				data:{
					list:[
						{
							id:"111",
							text:"hello"
						},
						{
							id:"222",
							text:"world"
						}
					]
				}
			})
		</script>
		
		<!-- v-for打印对象信息 -->
		<div id="app2">
			<div v-for="(item,key,index) of userInfo">
				{{item}}--{{key}}--{{index}}
			</div>
		</div>
		<script>
			var vm=new Vue({
				el:"#app2",
				data:{
					userInfo:{
						name:"li",
						age:22,
						sex:"male"
					}
				}
			})
		</script>
	</body>
</html>