Vue实践--V-for指令

当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。

当遍历数组的时候有一个可选项index，是当前项的索引 类似与 v-for = (item,[index]) in items;

			
			
{{index}}.{{book.bookName}}
		

当遍历的数据items是一对象的时候，有两个可选项 key和 index，分别表示当前项的属性名和下标，表达式类似于 v-for = (item,[key],[index]) in items；

			
			
{{index}}.我的任务是{{item.name}},完成时间是{{item.time}}
		

v-for循环是支持用在templete（包裹元素）元素上的，以此来进行多个元素的渲染。

数组的更新
 vue的核心是数据和视图的双向绑定，按照道理来说，数据发生变化的时候，视图也会发生变化，
v ue包含了一些监控数组发生变化的方法（跟原生js中操纵数组的方法差不多）：push（），splice（），pop（）等等，
 但是 有一些却不能直接触发数组变化：filter（），concat（），slice（）因为这些方法并不是在原数组上做出改变，而是产生了新的数组，   所以要想视图发生改变，可以让产生的新数组赋值给原始数组；

还有一些对数组的操作中Vue是不能检测的到的：1.对数组的中某一项直接改变其值，2.直接改变数组中的长度；
 那么，有啥解决办法呢？
对于问题1.例如如果要替换books数组中的第三项，可以用Vue内置set方法：Vue.set(myApp.books,3,{新的数据}),其中Vue.set也可以改为 myApp.$set(一般在webpack中).
对于问题2.可以直接使用splice方法，例如要将books数组长度置为1，可以是myApp.books.splice(1)，

数组的过滤和排序可以通过计算属性来实现（以原始数组为初始数据，通过计算属性返回排序或者过滤后的数组，遍历计算属性）
完整的HTML:

	
	


	
	

		

			
			
{{index}}.我的任务是{{item.name}},完成时间是{{item.time}}
		
		

			
			
{{key}}.{{book.bookName}}
		
		

			
			{{item}}
		
		点击查看效果