首页> 基础笔记 >Vue学习笔记 Vue学习笔记
v-for指令通过key管理状态
作者：小萝卜 2024-03-09 【 Vue 】 浏览 85
简介当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
v-for渲染列表通过key维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key 属性：
<p v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</p>
<p v-for="(item,index) in ob_arr" :key="item.id">name:{{item.names}}</p>
<p v-for="(item,index) in ob_arr" :key="index">name:{{item.names}}</p>
export default{
data(){
return{
arr:['aa','bb','cc'],
ob_arr:[
{id:1,names:'dd1',title:'ee1',keys:'ff1'},
{id:2,names:'dd2',title:'ee2',keys:'ff2'},
{id:3,names:'dd3',title:'ee3',keys:'ff3'},
],
}
}
}
很赞哦！ (0)
上一篇：vue事件处理指令v-on
下一篇：v-for指令遍历对象
