首页> 基础笔记 >Vue学习笔记 >基础和指令基础和指令

v-for指令通过key管理状态

作者：小萝卜 2024-03-09 【 Vue 】浏览 506

简介当 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指令遍历对象