v-for指令

Posted 2023-03-15

参考技术A

v-for作用：专门用于迭代的指令
我们可以用 v-for 指令基于一个数组来渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

单单迭代字符串的情况还是比较少，一般迭代对象组成的数组

这样的数据结构更清晰，里面一条一条的数据，每一条数据都包含子一个对象中。
在输出显示的时候，可以直接.的形式来拿到对应的属性

另外，双花括号里面的值是可以运算的。比如有个折扣

花括号里面可以进行运算

避免当没有折扣的时候显示NAN

（但是这样写特别臃肿，不够语义化，以后可以使用计算属性来写。）
也可以动态插入

对应也是动态的页面展示。
也就是说v-for也是一直在监视着数据的变化，当数据发生改变的时候，页面也会跟着改变。所以我们只要结构样式写好，只需要动数据就好了，其他东西不用管。

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

迭代对象属性

提供第二个的参数为 property 名称 (也就是键名)：

还可以用第三个参数作为索引：