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

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

<ul :class="{bookList:istrue}">
			<!-- 循环数组 -->
			<li v-for = "(book,index) in books" v-if = "istrue">{{index}}.{{book.bookName}}</li>
		</ul>
当遍历的数据items是一对象的时候,有两个可选项 key和 index,分别表示当前项的属性名和下标,表达式类似于 v-for = (item,[key],[index]) in items;

<ul>
			<!-- 循环对象 -->
			<li v-for = "(item,index) of tasks">{{index}}.我的任务是{{item.name}},完成时间是{{item.time}}</li>
		</ul>
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:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for循环</title>
</head>
<body>
	<!-- html部分 -->
	<div class="container" id="container">
		<ul>
			<!-- 循环对象 -->
			<li v-for = "(item,index) of tasks">{{index}}.我的任务是{{item.name}},完成时间是{{item.time}}</li>
		</ul>
		<ul :class="{bookList:istrue}">
			<!-- 循环数组 -->
			<li v-for = "(book,key) in books" v-if = "istrue">{{key}}.{{book.bookName}}</li>
		</ul>
		<div class="intNum">
			<!-- 循环整数 -->
			<span v-for = "item in num">{{item}}</span>
		</div>
		<button @click="ArrayPush">点击查看效果</button>
	</div>
	<script type="text/javascript" src="../../dist/vue.min.js"></script>
	<script type="text/javascript">
		/* javascript部分 */
		var myApp = new Vue({
			el:"#container",
			data:{
				tasks:{
					taskname:{
						name:"完成验收模块的调整",
						time:new Date(2017,10,11)
					},
					taskname1:{
						name:"完成巡视模块的调整",
						time:new Date(2017,10,14)
					},
					taskname2:{
						name:"完成验收发文模块的调整",
						time:new Date(2017,10,17)
					},
					taskname3:{
						name:"完成旁站模块的调整",
						time:new Date(2017,10,20)
					}
				},
				books:[
					{bookName:"javascript高级程序设计"},
					{bookName:"你不知道javascript(上)"},
					{bookName:"你不知道javascript(中)"},
					{bookName:"你不知道javascript(下)"},
				],
				istrue:true,
				num:100
			},
			methods:{
				ArrayPush:function(){
					var objOption = {
						bookName:"Vuejs实践"
					}
					this.books.push(objOption)
				}
			}
		})
		myApp.books.splice(1)
	</script>
</body>
</html>


Logo

前往低代码交流专区

更多推荐