Vue中v-for循环键属性注意事项总结

当Vue用v-for更新呈现的元素列表时，默认情况下它使用“就地重用”策略。如果数据项的顺序发生了变化，Vue不会移动DOM元素来匹配数据项的变化，而是简单地在这里重用每个元素，并确保它显示在特定索引下呈现的每个元素。

为了给Vue一个提示，使其能够跟踪每个节点的身份，从而重用和重新排序现有的元素，您需要为每个项目提供一个唯一的键属性。键属性的类型只能是字符串或数字。

在下面的例子中，如果您没有将键绑定到p元素，我将首先选择第一个。

然后输入ID和名称，点击添加按钮，出现如下情况，选择新添加的元素。如果键属性被绑定，这将不会发生。

完整代码：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/head body div id=' app '！-v-for循环普通数组-div labelid : input type=' text ' v-model=' id '/labellabelname : input type=' text ' v-model=' name '/labelin put type=' button ' value=' add ' @ click=' add '/div-注意：当v-for循环时，key属性只能使用number或string -！-注意：使用key时，必须以v-bind绑定属性-！-在组件中，使用v-for循环时，或者在某些特殊情况下，如果v-for有问题，则必须同时使用v-for。为列表“3360键=”项中的“=”项指定唯一的字符串/数字类型：key值-p v。id' input type=' checkbox'/{{item。id}}-{{item。name } }/p/div/body script src=' http : Vue . min . js '/script script var VM=new Vue({ El : ' # app '，data:{ id: ' '，name: ' ')，list:[ {id:1，Name:' Lisi' }，{ id:2，name: ' Ying Zheng ' }，{ id 3:0} } });/script/html摘要

以上是边肖介绍的Vue中v-for循环关键属性注意事项的总结。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！