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


Posted in Javascript onNovember 07, 2019

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

图1

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

图2

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

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

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

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

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

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

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

Javascript 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
js自制图片放大镜功能
Jan 24 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
自动跳转中英文页面
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
教你安装python Django(图文)
2013/11/04 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python实现新浪博客备份的方法
2016/04/27 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python实现根据文件格式分类
2019/10/31 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
在校大学生个人的自我评价
2014/02/13 职场文书
社区娱乐活动方案
2014/08/21 职场文书
通知函格式范文
2015/04/27 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers