Vue.js列表渲染的详细解析你怎能错过？

本文共计1521个文字，预计阅读时间需要7分钟。

介绍+v-for+将一个数组对应为页面上的元素+Vue.js使用的+v-for+指令来处理组件元素的循环迭代逻辑。通常它还会与+v-if+配合使用，达到我们所需要的处理逻辑。+v-for+的语法形式是+v-for=+(item, index) in items+。

介绍

用 v-for 把一个数组对应为页面上的一组元素

vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑。通常它会和 v-if 配合使用，达到我们所需要的处理逻辑。
v-for 的语法形式是 item in items，其中 items 就是我们要循环的数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>

我们都知道既然有循环那肯定少不了对索引的处理。v-for 指令给我们提供了可选的第二个参数，即当前项的索引。

<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>

index 就是那个当前索引了。

你也可以使用 of 替代 in 作为分隔符。