vue 中遍历对象显示的顺序不对

最新推荐文章于 2023-08-02 17:59:49 发布
最新推荐文章于 2023-08-02 17:59:49 发布
阅读量9.5k 收藏
点赞数
分类专栏： vue 文章标签： vue 排序 v-for
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/halo1416/article/details/84784835
版权

一、情况说明：在wacth里面生成了一个日期字符串的的数组（如下图1），如果遍历这个数组生成一个以日期为key的Object，但是数组里面的元素顺序和Object的属性的顺序是不一样的，并且在vue模板中遍历这个Object并显示key，得到的是数组的元素顺序（如下图2）！

图1

图2

 

二、过程分析：问题出在了遍历数组得到对象上，这个时候的顺序变了

三、解决方法：先给数组排序，在遍历得到对象

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

 

halo1416
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue改变循环遍历后的数据实例
10-16
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue循环遍历对象出现乱序问题
最新发布
qq_43378083的博客
05-21 293
问题描述：后端传回对象格式的数据，v-for直接循环显示，出现乱序问题。直接用map循环处理数据，发现还是乱序
vue 解决遍历对象显示的顺序不对问题
10-16
今天小编就为大家分享一篇vue 解决遍历对象显示的顺序不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 使用v-for遍历对象，如何保证顺序？
weixin_43814775的博客
12-16 6449
遇到的问题： 后端按顺序返回了所有的值data, 所以我用v-for来循环的时候， 顺序偶尔对不上！这个就很难受了 为什么？ 1、会先判断是否有iterator接口，如果有循环执行next()方法 2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致 如何保证顺序？ 将对象的键值手动保存在数组中，因为数组的顺序是可以保证的 例如：Object.keys() ， Object.values() async refreshIndex(ctx,
vue使用v-for遍历对象的顺序问题
weixin_41359197的博客
04-12 4523
v-for循环会先判断是否有iterator接口，如果有循环执行next()方法，会调用Object.keys()方法。 原生具备Iterator接口数据结构的：Array、Map、Set、TypedArray、函数的arguments对象、NodeList对象。 Object.keys()方法会按照新元素是否为 array index，界定是否重新排序并插入到开头。（简单理解：把能转换Number类型的key值进行排序，剩下的按先来后） 若业务需依赖对象 key 先来后到的排序、且涉及普通字符串与数
vue中用v-for遍历填充列表时，可能会由于index作为key产生顺序显示错误是为什么呢？
ytfdcxy的博客
10-19 1051
VUE
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
Vue循环遍历选项赋值到对应控件的实现方法
10-15
在Vue.js框架中，我们经常需要处理数据的循环遍历，并将这些数据绑定到相应的UI控件上。本文将详细讲解如何在Vue中实现这一功能，以编辑试题选项为例进行说明。 首先，我们要理解Vue中的数据绑定机制。Vue采用声明...
vue中的循环对象属性和属性值用法
10-14
但是，当我们要循环遍历对象的属性和属性值时，我们可以这样使用`v-for`： ```html (value, key, index) in object">{{ index }} -- {{ key }}: {{ value }} export default { data() { return { ...
vue数组拖拽改变排序
weixin_47586598的博客
05-27 652
vue数组拖拽改变排序
vue的v-for怎么对数组进行一个倒序的循环遍历？
weixin_48373171的博客
08-02 2560
公司要求做一个对话窗口，并要求对话内容存到数组里，那你看，这不就用上了。
vue 数组转对象与对象转数组（对象与数组的相互转换）
leng0920的博客
03-29 4266
vue 数组转对象与对象转数组（对象与数组的相互转换）
遍历对象属性名称排序混乱的解决方法
baichi2695的博客
02-25 2028
一、出现的问题： 用for in遍历对象后，出现排序混乱，如下图所示（按日期排序）： for(let key in obja){ dataArr.push(key); } 遍历后放入数组的对象属性名称顺序： 为什么会这样？查了资料说是ES版本以及浏览器的解析问题，先不管了，反正有解决的方法就行。 二、解决办法： 在遍历对象的时候进行对象的排序处理即可 小知识点：sort()方法不填参数的时候，默认是按照字符编码的顺序进行排列的，也就是按照字母的顺序。但是同个大小写的字母字符编码不是连在一起的，
JavaScript 循环对象顺序不对
qq_43487084的博客
10-31 1949
而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范，属性遍历顺序由属性构建的顺序决定。它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。很显然顺序跟想象的不一样，因为对象中没有顺序，他不是数组，所以想要得到一个顺序就首先要只给对象指定规则，这里是通过对象的value的字母来指定的规则。后台返回对象参数展开后如下。
关于js中for...in循环对象时，输出key值顺序混乱问题
weixin_52755319的博客
03-31 4263
那这个时候，通过线性结构来存储数据，查找肯定的快的，但是如果涉及到大量的修改数据，那么动一发而牵全身，是非常耗性能的，所以数据多了，v8采用了慢排序。循环对象时，顺序为什么会乱？
vue渲染数据后顺序乱了
Boboy
12-17 4342
首先vue渲染别忘了加上key确保唯一。 其次渲染顺序可能出现的原因： 项目中后端传回来的是一个对象，对象的每个属性是按字符编码排序的，可以说是无序的（浏览器控制台打印出来的对象经过特殊处理，所以看起来是有序的），渲染的时候顺序就乱了，后端改成数组再传回来就没问题了。这要求后台传一个有顺序的list返回。 ...
for循环中调用接口获取对象放到数组中，每次数组中对象的顺序都不一致
qq_37150922的博客
05-20 937
问题： for循环中调用接口获取对象放到数组中，每次数组中对象的顺序都不一致 最开始打代码如下： const dataSetList = data.setCodes.split("|"); const allDataSet = this.allDataSet dataSetList.map((item,i) => { allDataSet.map(setData => { if(item === setData.code){ this.detail(setData.id)
vue333333 遍历对象
09-01
在Vue中，你可以使用v-for指令来循环遍历对象。在HTML中，你可以使用v-for指令来循环遍历对象，具体的语法是：v-for="(value, key, index) in object"，其中value是对象属性的值，key是对象属性的键，index是索引值。在JavaScript中，你可以使用for-in循环来遍历对象，具体的语法是：for (const key in object) {}。 例如，给每个对象中添加age属性，你可以使用forEach()函数遍历数组并执行相应的操作。具体的代码如下所示： ``` let forArr = [{name:'tom',sex:'man'},{name:'linda',sex:'woman'},] forArr.forEach((item,index) => { console.log("forEach循环==index==",index,item); item.age = 27 }) console.log("forArr==遍历后===",forArr) // forArr ---->[{name:'tom',sex:'man',age:27},{name:'linda',sex:'woman',age:27}] ``` 对于循环遍历字符串，你可以使用for循环，for-in循环，或者for-of循环。具体的代码如下所示： ``` let s = "abcd" // 使用for循环 for (let i = 0; i < s.length; i++) { console.log(i, typeof i, s[i]); //i为索引,s[i为值,typeof i 为number } // 输出结果：0 number a // 1 number b // 2 number c // 3 number d // 使用for-in循环 for (const key in s) { console.log("key", key, typeof key, s[key]); //key为索引,s[key为值,typeof key 为string } // 输出结果：0 string a // 1 string b // 2 string c // 3 string d // 使用for-of循环 for (const i of s) { console.log("i", i);//i为值 } // 输出结果：a // b // c // d ``` 总结起来，在Vue中，你可以使用v-for指令来循环遍历对象。在JavaScript中，你可以使用for-in循环来遍历对象，或者使用for循环、for-in循环、for-of循环来遍历字符串。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue 循环遍历对象、数组和字符串](https://blog.csdn.net/ingenuou_/article/details/122500455)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue 解决遍历对象显示的顺序不对问题](https://download.csdn.net/download/weixin_38639872/12932467)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值