Vue中v-for指令中的key遇到的问题
v-for 给了两个参数key和index,但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象,但是在数组下是没有key值的,而在对象下可以得到key,可以显示出来<div id="app"> <ul> <li v-for="(item,index
·
v-for 给了两个参数key和index,但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象,但是在数组下是没有key值的,而在对象下可以得到key,可以显示出来
- <div id="app">
- <ul>
- <li v-for="(item,index,key) of list">{{item.n}}
- <div>index={{ index }}</div>
- <div>key={{key}}</div>
- </li>
- </ul>
- <div>
- <div v-for="(item,key,index) of obj">
- {{item}}:{{key}}:{{index}}
- </div>
- </div>
- </div>
- </body>
- <script>
- var app=new Vue({
- el:'#app',
- data:{
- list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
- obj:{color:'red',age:18,sex:'girl'}
- }
- })
- </script>
显示的效果图:
v-for中的key:
v-for循环数据,当用for来更新已经被渲染的元素时,vue的“就地复用”机,是不会改变数据项的顺序的,如果想要重新排序,需要为每项添加key(也就是每项的唯一id)
当使用v-for正在更新已渲染的元素列表时,它默认使用“就地复用”策略。如果数据项的顺序被改变,vue将不是移动元素来匹配数据的顺序,而是简单的复用此处的每个元素,并且确保他在特定索引下显示已被渲染过的每个元素。经常在列表渲染输出中使用。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。
- <div v-for="item in items" :key="item.id">
- <!-- 内容 -->
- </div>
更多推荐
已为社区贡献17条内容
所有评论(0)