v-for="(item, index) in goodsList" :key="item.id"
时间: 2024-10-10 07:05:20 浏览: 25
Vue学习之旅Part16:Vue结合webpack使用vue-router实现路由和子路由
`v-for="(item, index) in goodsList"` 是 Vue.js 中的一个指令,用于循环遍历数组(这里是 `goodsList`)。其中:
- `(item, index)` 表示每次迭代过程中,`item` 是当前数组中的一个元素,`index` 是它的索引。
- `in goodsList` 指的是正在遍历的对象是 `goodsList` 数组。
`:key="item.id"` 是一个绑定属性(binding),它告诉 Vue 怎样跟踪数组项的变化。这里的 `item.id` 通常是每个数组项的唯一标识符,这样可以帮助 Vue 更有效地更新DOM。如果数组中有两个项的 `id` 相同,Vue 会认为这是同一条数据,避免不必要的DOM操作。如果没有提供 `key`,Vue 会默认生成一个随机字符串作为 `key`,这可能导致性能问题。
举个例子:
```vue
<ul>
<li v-for="(item, index) in goodsList" :key="item.id">
{{ item.name }} - {{ index + 1 }}
</li>
</ul>
```
在这个列表中,每一项 `<li>` 都会展示 `goodsList` 中相应商品的名称及其在列表中的顺序。
阅读全文