As shown in the following code
<div id="app">
<ul>
<li v-for="item,index in items" :key="index">
{{index}}{{ item.message }}
</li>
</ul>
<ul>
<li v-for="value, key in object" :key="index">
{{key}} : {{ value }}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
items : [
{ message: 'Foo' },
{ message: 'Bar' }
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
});
</script>
1.v-for instruction based on the array , to render the list, using the format item in items form.
source data items array, item alias is iterated array element, simply, is that items following items array code, item 2 is the array object representing {message: 'Foo'} or {message: ' bar '} each.
2.v-for supports the second parameter is the index of the current project, the writing format < Li V-for = "(Item, index ) in items"> index {{}} - {{}} item.message </ Li>
3.v-for the item in items can be written in the second method - item of items, the same effect, in the alternative as of
The instructions may traverse 4.v-for objects , to render the list, using the format value in object form
the value attribute for the object, object is the object itself. Party follows the code object.
5.v-for objects in the form of support for the second parameter, the format V-for = "(value, name) in object", as the name attribute of the object name, the object value can be understood as the 'Jane Doe' , name as the author
6.v-for objects may have the form of a third parameter, an index format < div V-for = "(value, name, index) in Object"> index {} {} {} {} name:. {{ }} value </ div>, the output is 1. author: Jane Doe
7.v-for, update the policy to take place, if the data item to change the order, do not move the elements to match the data sequence.
E.g
Page =========
<li v-for="item,index in items" >
{{index}}{{ item.message }}
</li>
Data =====================
items : [
{ message: 'Foo' },
{ message: 'Bar' }
],
Output ============
- 0Foo
- 1Bar
If you change the order of data
items : [
{ message: 'Bar' },
{ message: 'Foo' },
],
Output =============
- 0Bar
- 1Foo
Above, the direct order is changed, not the original records 0 and 1
Solutions and procedures will
A v-for the rendering process must be dynamic binding key, can track the status of each node, thereby re-use and reorder existing elements, you need to provide a unique for each key way of writing is
<ul>
<li v-for="item,index in items" :key="item.id">
{{item.id}}{{ item.message }}
</li>
</ul>
data======
items : [
{ message: 'Bar' , id : 0},
{ message: 'Foo' , id : 1},
],
Output - ==========
- 0----Bar
- 1----Foo
If the data ====
{ message: 'Foo' , id : 1},
{ message: 'Bar' , id : 0},
Output =======
- 1----Foo
- 0----Bar
If you write key, it will be dynamic binding element, colon equivalent v-bind:
The absence of exceptional circumstances, we can use the index, if the background gives a unique identifier that uniquely identifies try to use interface provides the background to ensure that each element update, make sure that they can fight for rendering.