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中进行
转自作者：椰果粒
网友评论