在学习vue2.0时，关于处理v-for键值顺序时发现的问题：

<body>

    <!-- 普通循环 -->

    <!-- {{num}} -->

    <!-- 列表循环 -->

    <div id="itany">

    <ul>

        <!-- name,value对应的是value name 但是在显示时则是name value -->

        <li v-for = "(name,value) in user">{{value}}-{{name}}</li>

    </ul>

    </div>

</body>

<script>

    window.onload = function(){

        new Vue({

            el:'#itany',

            data:{

                num:[12,14,25,67],

                user:{

                    id:'red',

                    age:'32',

                    class:'2',

                }

            }

        });

    }

</script>

</html>

不管是用

<li v-for = "(value,name) in user">{{name}}-{{value}}</li>
还是说用
<li v-for = "(name,value) in user">{{value}}-{{name}}</li>

所输出的结果都是如下：

而使用
<li v-for = "(value,name) in user">{{value}}-{{name}}</li>
<li v-for = "(name,value) in user">{{name}}-{{value}}</li>
则会出现如下结果：
希望该博客对你有帮助！

关于vue中v-for的键值顺序的更多相关文章

  1. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  2. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  3. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  4. 【转】kubernetes 中 deployment 支持哪些键值

    这个比较全,可以参考 ================= https://www.addops.cn/post/kubernetes-deployment-fileds.html ========== ...

  5. Map泛型集合-国家中文和英文的键值映射

    package collection; import java.util.HashMap; import java.util.Map; public class Test5 { public stat ...

  6. JDK6中System.getProperties返回键值说明

    JDK6中java.lang.System.getProperties()方法返回键值说明. 键 相关值的描述 java.version Java 运行时环境版本 java.vendor Java 运 ...

  7. JS001. antd vue遍历setFieldsValue表单键值对无效 ( {} -> new Object() )

    问题代码: const tempFieldsValue = this.form.getFieldsValue() Object.keys(tempFieldsValue).map((k) => ...

  8. （转载）php 合并数组中的数据,如果键值相等其值相加

    (转载)http://hi.baidu.com/syxrrrr/item/7dfb2387343ce0874414cfdd /* * 合并数据,如果键值相等其值相加 * @param array $d ...

  9. Vue中如何监控某个属性值的变化？

    比如现在需要监控data中, obj.a 的变化.Vue中监控对象属性的变化你可以这样: deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改: 还有一种 ...

随机推荐

  1. 编写第一个GET、POST接口[renren-fast框架系列（1）]

    配置好 renren-fast 脚手架,学习完 Spring MVC 架构后,我需要具体调试 renren-fast 的接口,比如要新增某个接口. 什么是前后端分离 运行 renren-fast 项目 ...

  2. PHP pdf转png linux版本

    linux下 安装 ImageMagick 及其 php imagick扩展 PHP版本 7.1.29 : ImageMagick版本 ImageMagick-7.0.8-68: PHP扩展imagi ...

  3. 关于mysql8.0 caching_sha2_password和sha256_password认证方式

    今天开发上线新系统反馈数据库连接有问题.自己分别在命令行下及navicat进行连接发现,发现root用户密码在命令行下可以正常连接,但是新建立的子用户连接不上.于是就换成管理员密码.立即就连接上了.看 ...

  4. Python字符串的所有操作

    name = 'my name is jack' print(name.capitalize()) #首字母大写 print(name.count('a')) #字符出现次数 print(name.c ...

  5. 昇腾CANN论文上榜CVPR，全景图像生成算法交互性再增强！

    摘要:近日,CVPR 2022放榜,基于CANN的AI论文<Interactive Image Synthesis with Panoptic Layout Generation>强势上榜 ...

  6. 移动IP通信过程

    看了点资料,沿着自己的思路来整理一下计算机网络部分移动IP通信遇到的问题以及是怎样解决的.如有错误,欢迎纠正! 遇到问题,然后解决问题. 沿着这样一个思路我们可以看看移动IP通信和传统的网络通信有什么 ...

  7. dpwwn-01

    环境配置 靶机下载地址: https://download.vulnhub.com/dpwwn/dpwwn-01.zip 下载好解压打开.vmx文件即可 启动后如图: 无法直接获得靶机ip,用kali ...

  8. 在使用Access连接后获取数据--出现此类问题如何解决---未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序解决办法

    转载:https://blog.csdn.net/yyzzhc999/article/details/79367114 using System; using System.Collections.G ...

  9. 两天入门SolidWorks2016

    视频:https://www.bilibili.com/video/BV1ub411c7ct 饭前甜点--基本设置 一.界面设置 1.1 调出文件栏 打开SOLIDWORKS 2016 x64 Edi ...

  10. bzoj4032/luoguP4112 [HEOI2015]最短不公共子串(后缀自动机+序列自动机上dp)

    bzoj4032/luoguP4112 [HEOI2015]最短不公共子串(后缀自动机+序列自动机上dp) bzoj Luogu 题解时间 给两个小写字母串 $ A $ , $ B $ ,请你计算: ...