vue 使用v-for遍历数组和遍历对象

vue 使用v-for遍历数组和遍历对象

splic(...)方法的使用请参考：http://www.jiajiajia.club/blog/artical/262

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>v-for遍历数组</h1>
			
			<ul>
				<li v-for="(s,index) in student" :key="index">
					name:<span v-text="s.name"></span>,
					age:<span v-text="s.age"></span>
					<button @click="del(index)">删除</button>
					<button @click="update(index,{name:'jia',age:23})">更新</button>
				</li>
			</ul>
			
			<h1>v-for遍历对象1</h1>
			<ul>
				<li v-for="value in teacher">
					<span v-text="value"></span>
				</li>
			</ul>
			
			<h1>v-for遍历对象2</h1>
			<ul>
				<li v-for="(value,key) in teacher" :key="key">
					<span v-text="key"></span>:
					<span v-text="value"></span>
				</li>
			</ul>
			
		</div>
		<script>
			var v=new Vue({
				el:'#app',
				data:{
					student:[
						{name:'wag',age:1},
						{name:'wag1',age:2},
						{name:'wag2',age:23},
						{name:'wag3',age:44}
					],
					teacher:{
						name:'jiajia',
						age:23,
						className:'语文'
					}
				},
				methods:{
					//删除
					del(index){
						this.student.splice(index,1);
					},
					//更新
					update(index,stu){
						//this.student[index]=stu;//并没有改变stu本身，所以页面上不会发生变化
						/** 
						 * 以下方法被vue包装，使用以下方法将会触发视图的更新
						 	push()
							pop()
							shift()
							unshift()
							splice()
							sort()
							reverse()
						 **/
						this.student.splice(index,1,stu);
					}
				}
			})
		</script>
	</body>
</html>

fixed

没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。