Vue使用v-for遍歷陣列和物件
阿新 • • 發佈：2020-09-21
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue-Computed計算屬性</title> 6 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script> 7 <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/index.js"></script> 8 <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/theme-chalk/index.css" rel="stylesheet"> 9 </head> 10 <body> 11 <div id="app"> 12 13 <!-- v-for遍歷陣列 --> 14 <ul> 15 <li v-for="(item,index) in items" :key="index"> 16 <span v-for="(ite,key) in item" :key="key">{{index}}---{{key}}---{{ite}}</span> 17 </li> 18 </ul> 19 <ul> 20 <li v-for="(item,key) of items" :key="key"> 21 <span v-for="(ite,key) in item" :key="key">{{ite}}</span> 22 </li> 23 </ul> 24 25 <!-- v-for遍歷物件 --> 26 <ul> 27 <li v-for="value in obj">{{value}}</li> 28 </ul> 29 <ul> 30 <li v-for="(value,key) in obj">{{key}}---{{value}}</li> 31 </ul> 32 33 <!-- 推薦使用這種，為標籤繫結唯一的key，提高複用性 --> 34 <ul> 35 <li v-for="(value,key,index) in obj" :key="index">{{index}}---{{key}}---{{value}}</li> 36 </ul> 37 </div> 38 <script> 39 var vm = new Vue({ 40 el: '#app', 41 data: { 42 items: [ 43 { 44 message: 'Foo' 45 }, 46 { 47 message: 'Bar' 48 } 49 ], 50 obj:{ 51 name:'測試', 52 age:'23', 53 address:'商丘' 54 } 55 }, 56 methods: { 57 58 } 59 }) 60 </script> 61 </body> 62 </html>