| <!-- |
| * v-for="item in list": assign item and $index to this |
| * v-for="(index, item) in list" assign index and item to this |
| --> |
| |
| <template> |
| <div> |
| <text class="title">Custom item</text> |
| <text class="subtitle" v-for="item in list" :key="item.index" >{{item}}</text> |
| <text class="title">Custom key and item</text> |
| <text class="subtitle" v-for="(v,i) in list" :key="i" >{{i}}-{{v}}</text> |
| <text class="title">Array of Object</text> |
| <text class="subtitle" v-for="(item, k, index) in list2" :key="index" >> {{index}}-{{item.text}}</text> |
| </div> |
| </template> |
| |
| <style scoped> |
| .title {font-size: 48px;} |
| .subtitle {font-size: 36px;} |
| </style> |
| |
| <script> |
| module.exports = { |
| data: function () { |
| return { |
| list: [ |
| 'a', |
| 'b', |
| 'c', |
| 'd', |
| 'e' |
| ], |
| list2: [ |
| {text: 'a'}, |
| {text: 'b'}, |
| {text: 'c'}, |
| {text: 'd'}, |
| {text: 'e'} |
| ] |
| } |
| } |
| } |
| </script> |