Vue中循环的反人类设计

今天学习Vue到循环那里，表示真是不能理解Vue的反人类设计

具体看代码吧！

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10   <ul>
11     <li v-for="(value, key) in object">
12     {{ key }} : {{ value }}
13     </li>
14   </ul>
15 </div>
16 
17 <script>
18 new Vue({
19   el: '#app',
20   data: {
21     object: {
22       name: '菜鸟教程',
23       url: 'http://www.runoob.com',
24       slogan: '学的不仅是技术，更是梦想！'
25     }
26   }
27 })
28 </script>
29 </body>
30 </html>

以上是菜鸟教程上的Vue教程的代码，真没想到循环遍历键值对的结构时，Vue要先value后key，恰恰和人们平常的习惯相反！所以以后一定要记得Vue遍历此类结构时，一定是要先value后key，以免出错！

 

posted @ 2019-03-31 10:36  springionic  阅读(381)  评论(0)  编辑  收藏  举报