一、列表不添加:key属性
items=[{name:“小明”,id:“xiaoming”},{name:“小胖”,id:“xiaopang”}]
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
上面代码中li标签中无:key属性,vue在items改变时会重新渲染所有的li标签
二、列表添加:key属性
(一)添加:key属性为索引index
<ul v-if="items.length">
<li v-for="(item,index) in items" :key="index">{{ item.name }}</li>
</ul>
上面代码中li标签中存在:key="index"属性,vue在items改变时会重新渲染新增的index中li,这样存在一个问题:items改为[{name:“小红”,id:“xiaohong”},{name:“小明”,id:“xiaoming”},{name:“小胖”,id:“xiaopang”}]时,vue又会重新渲染所有的li标签,这里最好的方法是给:key属性添加唯一的标识,这样可以只渲染已修改的数据,如:
<ul v-if="items.length">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>