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中进行
转自作者:椰果粒