码迷,mamicode.com
首页 > 其他好文 > 详细

关于vue中v-for的键值顺序

时间:2019-10-09 09:17:03      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:load   v-for   mamicode   ace   div   htm   img   UNC   nbsp   

在学习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的键值顺序

标签:load   v-for   mamicode   ace   div   htm   img   UNC   nbsp   

原文地址:https://www.cnblogs.com/liwids-blog/p/11639411.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!