vue使用v-for遍历对象的顺序问题

已于 2022-04-12 16:32:45 修改
阅读量4.5k 收藏 1
点赞数 2
文章标签： vue
于 2022-04-12 16:29:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41359197/article/details/124126571
版权

v-for循环会先判断是否有iterator接口，如果有循环执行next()方法，没有则会调用Object.keys()方法。

原生具备Iterator接口数据结构的：Array、Map、Set、TypedArray、函数的arguments对象、NodeList对象，对象（Object）没有默认部署 Iterator 接口。

Object.keys()方法会按照新元素是否为 array index，界定是否重新排序并插入到开头。（简单理解：把能转换Number类型的key值进行排序，剩下的按先来后）

若业务需依赖对象 key 先来后到的排序、且涉及普通字符串与数字字符串的混合，再考虑到旧引擎的兼容问题的情况，另外维护一个 key 的数组会更加稳妥。

Zz丶Hang
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue v-for遍历对象
王敬辉的博客
06-15 1710
v-for遍历对象时 参数： 第一个为值，第二个为键名，第三个为索引 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!-- v 属性值 key 属性 i 索引值-->
vue 解决遍历对象显示的顺序不对问题
12-13
一、情况说明：在wacth里面生成了一个日期字符串的的数组（如下图1），如果遍历这个数组生成一个以日期为key的Object，但是数组里面的元素顺序和Object的属性的顺序是不一样的，并且在vue模板中遍历这个Object并显示key，得到的是数组的元素顺序（如下图2）！ 图1 图2 二、过程分析：问题出在了遍历数组得到对象上，这个时候的顺序变了 三、解决方法：先给数组排序，在遍历得到对象 文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！ 以上这篇vue 解决遍历对象显示的顺序不对问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue 使用v-for遍历对象，如何保证顺序？
weixin_43814775的博客
12-16 6499
遇到的问题： 后端按顺序返回了所有的值data, 所以我用v-for来循环的时候， 顺序偶尔对不上！这个就很难受了 为什么？ 1、会先判断是否有iterator接口，如果有循环执行next()方法 2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致 如何保证顺序？ 将对象的键值手动保存在数组中，因为数组的顺序是可以保证的 例如：Object.keys() ， Object.values() async refreshIndex(ctx,
vue循环遍历对象出现乱序问题
最新发布
qq_43378083的博客
05-21 334
问题描述：后端传回对象格式的数据，v-for直接循环显示，出现乱序问题。直接用map循环处理数据，发现还是乱序
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行
歌谣的博客
01-16 3295
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行 .item-codes{width:800px;word-break: break-all;white-space: normal;} 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
vue3遍历集合是参数先后顺序的区别v-for=“(tag,index) in activeIds“和 v-for=“(index,tag) in activeIds)“
qq_46038137的博客
08-28 174
这样{{tag}}取到的值是tag文本值。
vue 中遍历对象显示的顺序不对
halo1416的博客
12-04 9561
一、情况说明：在wacth里面生成了一个日期字符串的的数组（如下图1），如果遍历这个数组生成一个以日期为key的Object，但是数组里面的元素顺序和Object的属性的顺序是不一样的，并且在vue模板中遍历这个Object并显示key，得到的是数组的元素顺序（如下图2）！ 图1 图2   二、过程分析：问题出在了遍历数组得到对象上，这个时候的顺序变了 三、解决方法：先给数组排序，在...
Vue基础03_v-for循环排序
weixin_46146313的博客
01-27 4537
v-for指令解决模板循环问题 v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。 基本用法 js写法 ...
【vue】v-for按照字段自定义排序
@point
09-27 2123
需求： v-for一个数组，按照数组里面的orderNumber排序。 解决：关键代码如下???? <li v-for='item in sort'> {{item}} </li> computed:{ sort:function(){ return sortByKey(this.modules,'orderNumber'); //this.modules是原数组 }
VUE2.0学习之路3【内部指令】 v-for的使用及v-for中的排序操作
厂长的博客
12-26 1991
简单的v-for实例 <div id="app"> <ul> <li v-for = "item in items"> {{item}} </li> </ul> </div> <sc...
v-for Vue列表渲染&列表过滤（使用计算属性、监视属性实现简单的搜索功能）&列表排序
weixin_55772633的博客
07-10 3171
使用 v-for 遍历对象，可以获取到三个参数，第一个参数为当前项的值（value），第二个参数为当前项对应的键（key），第三个参数为当前项的索引（index）。使用 v-for 遍历数组，可以获取到两个参数，第一个参数为当前正在遍历的数组的对象，第二个参数为当前数组的对象对应的索引（从0开始）。使用 v-for 遍历字符串，可以获取到两个参数，第一个参数为当前正在遍历的字符，第二个参数为当前字符对应的索引（从0开始）。items 是待循环的数据。item 是当前的循环项。
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
vue 使用v-for进行循环的实例代码详解
10-15
在 `<div id="app2">` 中，`<div v-for="(value, key) in person">` 用于遍历对象的属性。这里，`value` 是属性的值，`key` 是属性的键。例如，对于 `person` 对象，`value` 将依次是 `'Xsan'` 和 `26`，`key` 将是...
【vue】v-for循环样式乱
SZnAl的博客
03-02 1009
vue中，使用v-for进行后端数据向前台渲染时，排好的版面错乱 原因：在li上使用v-for，而非ul <ul> <li v-for="(v,i) in data" :key="i"> <img src="../../assets/everyday1.jpg" alt="" /> <p>{{v.title}}</p> <p>{{v.price}}</p> </li&
vue项目中v-for循环根据某个字段排序显示数据
霖霂晗的专栏
09-02 1407
vue中v-for循环根据某个字段排序
vue循环遍历 v-for
白羊座的橙子
02-18 536
当我们有一组数据需要进行渲染时，就可以通过v-for来完成 1、遍历数组 <!--在遍历的过程中，没有用到索引值--> <ul> <li v-for="item in names">{{item}}</li> </ul> <!--在遍历的过程中，获取下标值--> <ul> <li v-for="(item,index) in names"> {{index+1}} . {{item}}.
vue v-for in 对象 顺序排列
KangTongShun的博客
03-03 2468
今天在一个项目中用到了for in 语句，遇到了一个坑 例如这是一个vue文件 <script> //我有一个对象 export default { data() { return { list: { "2": "小明", "0": "小L", "1": "小J", } } } } </script> <template> <ul> <li v-for="(value,key,index) in l
vue中使用v-for遍历对象的键和值
07-25
在Vue中，可以使用v-for指令来遍历对象的键和值。下面是一个示例： ```vue <template> <div> <div v-for="(value, key) in myObject" :key="key"> {{ key }}: {{ value }} </div> </div> </template> <script> export default { data() { return { myObject: { name: 'John', age: 25, occupation: 'Developer' } }; } }; </script> ``` 在上面的示例中，我们使用v-for指令来遍历`myObject`对象的键和值。在每次迭代中，`key`变量表示当前键，`value`变量表示当前值。我们将它们显示在模板中，并使用`:key`属性来提供一个唯一的标识符。 这样，Vue会自动将对象的键和值遍历并渲染到页面上。 请注意，对象的键在遍历时是无序的，因此在渲染时可能会以不同的顺序显示键和值。如果您需要按特定顺序显示键和值，可以先将对象的键进行排序，然后再进行遍历。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值