vue.js 重学笔记(5) v-for循环列表

学习编程的唯一方法就是每天练习并且编写大量的代码。
-点赞是动力，关注是鼓励-

1.认识v-for指令

> 很多时候，我们将会对从后台获取的列表数据进行渲染，比如轮播图的图片数据等列表数据。这时，我们就会使用到我们的v-for指令。

2.v-for的基本用法

2.1 v-for循环数组

例子：现在有一个数组arr，需要使用ul，li标签完成渲染。

实现步骤：
1.确定渲染的数据：arr；
2.确定绑定的标签：数组有多少个成员，就应该有多少个li，因此，我们需要把v-for绑定在li标签上

解析：item 是变量，是用来临时存储arr数组中各项的值，item与arr之间可以使用of或者in 进行连接，具体of 和 in怎样用，我们后面再说。

我们还可以使用两个变量来遍历数组。

   <div id="app">         
			<ul>
				<li v-for="(item,index) of arr">{{item}}--{{index}}</li>
			</ul>        
		</div>

小结：循环数组的时候，可以获取到两个成员变量（item,index）,前者是数组成员，后者是数组成员对应的索引值

2.2 v-for循环数字

小结：v-for可以循环数字，数字是几，就会循环多少次，最小值为1.循环数字的时候，有两个成员变量(item,index),分别是数字成员，成员索引。

2.3 v-for循环字符串

小结：v-for可以循环字符串，分别输出每一个字符，循环字符串的时候，有两个成员变量(item,index),分别是字符串成员，成员索引。

2.3 v-for循环对象

小结：v-for可以循环对象，循环对象的时候，有三个成员变量(item,key,index),分别是属性值，属性名，索引。

of 与 in 区别

小结：of 和 in的 使用效果是一样的.
由于在javascript中，我们一般使用in用来遍历对象，用of 循环数组，所以一般情况下，我们在使用vue.js，也可以遵循这样的习惯。
in :用来遍历对象
of : 用来循环数组