《Vue应用开发》课件——2.12列表渲染指令.pptxVIP

任务2.12列表渲染指令for

在开发购物应用时，为了方便用户查找商品信息，通常会以商品列表的形式展示商品信息。在商品列表中，每件商品的结构都是相同的，如果每件商品的结构都要手动定义，会非常麻烦。为此，Vue提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构，v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。2.3.6 列表渲染指令

2.3.6 列表渲染指令根据数组渲染列表根据对象渲染列表根据数字渲染列表根据字符串渲染列表标签名v-for=(item,index)inarr/标签名标签名v-for=(item,name,index)inobj/标签名标签名v-for=(item,index)innum/标签名标签名v-for=(item,index)instr/标签名使用v-for循环渲染列表

divv-for=iteminitems:key=item.id/div使用v-for（根据list数组中的元素）渲染列表后，当在list数组中删除一个元素后，index会发生变化，v-for会重新渲染列表，导致性能下降。为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，建议通过key属性为列表中的每一项提供具有唯一性的值，示例代码如下。2.3.6 列