天天看点

vue暗含玄机的v-for指令

由于是多个事项,那么这个数据模型是一个数组;为了显示这些代办事项我们首先添加一些样本数据 

v-for使用方法一:

v-for指令遍历list的时候用 in/of皆可,此处概念可能与forin/forof有冲突,不能类比

v-for使用方法二:

如果我们要输出待办事项的序号,可以使用v-for中隐藏的一个index值来实现

只要用括号括住引用参数,最后一个值就是循环的索引

另外这里使用了属性绑定语法,

v-for使用方法三:

v-for指令遍历object的时候同样用 in/of皆可,此处概念同样与forin/forof有冲突,不能类比

v-for不单单可以循环渲染数组,还可以渲染对象属性:例如

输出:

  “Ray"

  "Liang"

v-for使用方法四:

v-for不单单可以循环渲染数组,还可以渲染对象属性,如果我们要输出待办事项的序号--此处显示为object中的key字段名称,可以使用v-for中隐藏的一个index值来实现:

打印:

first_name “Ray"

last_name "Liang"