今天学习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,以免出错!