Vue v-for circulation list

v-for item command requires special syntax in the form of items, wherein the source data is an array of items, and the item is an alias iterative array element.

v-for keywords may be used in instead of

v-for loop array

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

In the case where the cycle may also support an array for both parameters, there is an outer index index item addition, when the additional for loop element can access other properties vue

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for cyclic object

(Here traverse the object is to traverse all the properties of an object)

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

v-for objects up loop can be passed three parameters are value, name, index (where index and name are optional)

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

Maintenance status (do not understand)

Probably it is understood to mean the use of v-for Vue update the list when rendered, and not by way of moving Dom elements, but rather by way of each element of ... the specific update the document to see it, in short tutorials expression means that the (js basic types of key values when required) with a v-for possible wear when the key attribute . as follows:

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

The key attribute I tried the code into one, the page is not found in this property do not know why ...