4-Vue v-for列表渲染

v-for迭代分为数组迭代和对象迭代

作用： 控制HTML元素中的循环，实现语句列表的生成

用法： v-for = “item in 集合”，其中item指集合的子项，集合指被遍历的元素，通常为数组

用处： 用处：写在谁上边，谁遍历

数组迭代

栗子1：

运行结果 ：

栗子2： 可以使用of代替in来使用

运行结果 ：

foo

bar

jewel

栗子3： v-for还支持第二个可选参数作为当前项的索引

运行结果 ：

Parent - 0 - foo

Parent - 1 - bar

栗子4： 可以用template渲染多个元素块

运行结果 ：

栗子5： 整数迭代

运行结果 ： 1 2 3 4 5 6 7 8 9 10

栗子6： 也可以将10替换成一个变量，从data中提取数据

运行结果 ： 1 2 3 4 5 6 7 8

对象迭代

栗子1：默认遍历的是value的值

运行结果 ：

john

bob

30

栗子2： 可以提供第二个参数作为键名

运行结果 ：

FirstName : john

lastName : bob

Age : 30

栗子3：还可以接受第三个参数作为索引

运行结果 ：

0 : FirstName : john

1 : lastName : bob

2 : Age : 30

v-if and v-for

when they exist on the same node，v-for has a highter priority than v-if,that means the v-if will be run on each oteration of the loop separately.this is vary useful when you want to render nodes for only some items

举个栗子

运行结果 ：

hello : 0

world : 1

新增两个例子，分别对应数字排序和对象的属性排序

1. 数字排序

在JavaScript中，默认的排序方式是按照ascll码排序，即12排在1和3之间，所以需要用sortNumber函数将其转化成数字间的排序

在data中存放的是一组或一个数据，最好不要进行数据将的处理（比如排序，转化成大小写等），这些计算属性我们可以放在computed中进行

转自作者：椰果粒