尚硅谷的vue旅程08-vue中的列表渲染(v-for)

简介

列表渲染指令:(要强行绑定key属性，列表渲染的每一次的key的值都应该不一样)
	数组:v-for/index
	对象:v-for/key
			
！！vue数组变更方法:
	vue重写了数组中一系列改变数组内部数据的方法(实现逻辑:先调用原生，再更新界面)---》数组内部改变，界面自		动变化

vue数组变更方法入口: vue数组变更方法链接.
 
 
代码示例

<div id="demo">
	<h2>测试 v-for 数组测试(常用)</h2>
	<ul>
		<li v-for="(item,index) in arr" :key="index">
			{{item.name}}--{{item.age}}---{{index}}
			<button @click="updateItem(index,{name:'qwe',age:20})">更新</button>
			<button @click="deleteItem(index)">删除</button>
		</li>
	</ul>
	
	
	<h2>测试 v-for 对象测试(不常用)</h2>
	<!-- 对象中属性名应该没有重复，若有重复，则会覆盖 -->
	<li v-for="(value,key) in arr[2]" :key="key">
		{{key}}:{{value}}
	</li>
	
	
</div>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	//vue本身只是监视了arr数组的改变，没有监视内部数据的改变，所以没有使用 vue变更方法时，vue页面是不会更新的，即使arr数组内部的数据进行了更新
	new Vue({
		el:"#demo",
		data:{
			arr:[
				{name:"Jack",age:18},
				{name:"Rose",age:19},
				{name:"Minth",age:23}
			]
		},
		methods:{
			deleteItem(index){
				//将下标对应的数组元素清除  splice
				this.arr.splice(index,1);
			},
			updateItem(index,newValue){
				//将旧元素替换为新元素
				this.arr.splice(index,1,newValue);//splice() --> 功能:数组的内部元素的增删改
				
				// this.arr[index] = newValue;//不会改变arr本身的引用，只是改变arr数组内部的结构。由于没有使用 vue 的变异方法，所以vue界面并不会更新
				//this.arr = []; //改变了数组arr的引用
			}
		}
	})
</script>