5.vue的v-for列表渲染
如下代码所示
<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指令，可以基于数组，来渲染列表， 使用格式为 item in items 形式。
items 是源数据数组， item是被迭代的数组元素的别名 ，简单来说， items就是如下代码的 items数组 ， item就是数组中的2个对象，代表{ message: 'Foo' }或者{ message: 'Bar' } 的每一个。
2.v-for 可以支持第二个参数，是当前项目的索引， 书写格式为 <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li>
3.v-for 中的item in items 可以书写第二种方法 - item of items ，效果等同， in可替换为of
4.v-for指令 可以遍历对象 ，来渲染列表，使用格式为 value in object形式
value为对象的属性值，object则是对象本身。 如下方代码object。
5.v-for 对象形式支持第二个参数，格式为 v-for="(value, name) in object" ，name为对象的属性名， 则value可以理解为object中的 'Jane Doe'，name为author
6.v-for 对象形式可以有第三个参数，索引，格式为 <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>，输出结果为1. author : Jane Doe
7.v-for ，采取就地更新策略， 如果数据项顺序改变， 不会移动元素来匹配数据顺序。
例如
页面=========
<li v-for="item,index in items" >
{{index}}{{ item.message }}
</li>
数据=====================
items : [
{ message: 'Foo' },
{ message: 'Bar' }
],
输出============
- 0Foo
- 1Bar
如果更改data顺序为
items : [
{ message: 'Bar' },
{ message: 'Foo' },
],
输出=============
- 0Bar
- 1Foo
以上可知，顺序直接被更改，不会记录原本的0 和1
解决方式和必操作步骤
是 v-for渲染过程， 必须要动态绑定key ，能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 书写方式是
<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},
],
输出-==========
- 0----Bar
- 1----Foo
如果data====
{ message: 'Foo' , id : 1},
{ message: 'Bar' , id : 0},
输出=======
- 1----Foo
- 0----Bar
如果书写key ，就会动态绑定元素， 冒号相当于 v-bind:
如无特殊情况，我们都可以用index ，如果后台给予了唯一标识，尽量用后台接口提供的唯一标识， 以保证更新每个元素，都能确保他们争取渲染。
