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


Posted in Javascript onNovember 07, 2019

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

图1

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

图2

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

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

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

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

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

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

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

Javascript 相关文章推荐
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue项目移动端实现ip输入框问题
Mar 19 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
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
学习ExtJS form布局
2009/10/08 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python编程使用协程并发的优缺点
2018/09/20 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
承租经营合作者协议书
2014/10/01 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python