vue 解决遍历对象显示的顺序不对问题


Posted in Javascript onNovember 07, 2019

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

图1

vue 解决遍历对象显示的顺序不对问题

图2

vue 解决遍历对象显示的顺序不对问题

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

vue 解决遍历对象显示的顺序不对问题

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

vue 解决遍历对象显示的顺序不对问题

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

以上这篇vue 解决遍历对象显示的顺序不对问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 #Javascript
vue改变循环遍历后的数据实例
Nov 07 #Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 #Javascript
vue v-for直接循环数字实例
Nov 07 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP实现微信提现功能
2018/09/30 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
JavaScript中的关键字"VAR"使用详解 分享
2013/07/31 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
详解python3中的真值测试
2018/08/13 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python批量修改文件名的示例
2020/09/27 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
致全体运动员广播稿
2014/02/01 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
考试诚信承诺书
2014/05/23 职场文书
欢度春节标语
2014/07/01 职场文书
特岗教师个人总结
2015/02/10 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python