Vue实践--V-for指令

当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。当遍历数组的时候有一个可选项index，是当前项的索引类似与 v-for = (item,[index]) in items;{{index}}.{{book.bookName}}

初心鸿鹄

10525人浏览 · 2017-12-04 12:59:13

初心鸿鹄 · 2017-12-04 12:59:13 发布

当需要将一个数组或者对象循环遍历显示的时候可以使用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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^