vue里v-for下的key的作用

将v-for的元素赋予唯一的key属性,则会打破‘就地复用原则’;

这个就地复用原则是指 如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素

比如 <li v-for='item in persons' > {{item.id}} {{item.name}} <input type="text"></li>当persons数据变化后,比如persons数据reverse(),input不会随着persons的渲染而发生改变
但是如果带上key
<li v-for='item in persons' v-bind:key='item.id'> {{item.id}} {{item.name}} <input type="text"></li>,input就会随着persons的变化而变化

猜你喜欢

转载自www.cnblogs.com/dangdanghepingping/p/10160413.html