Vue-列表渲染

列表渲染

v-for

预期：Array | Object | number | string | Iterable (2.6 新增)
用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
```
<div v-for="item in items">
  {{ item.text }}
</div>
```
另外也可以为数组索引指定别名 (或者用于对象的键)：
```
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
```
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示：
```
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
```
从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

v-for 的详细用法可以通过以下链接查看教程详细说明。
参考：
- 列表渲染
- key

key

跟踪每个节点的身份，从而重用和重新排序现有元素
理想的 key 值是每项都有的且唯一的 id。data.id

数组更新检测

使用以下方法操作数组，可以检测变动：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
使用以下方法操作数组，无法检测到变动

filter()
concat()
slice()
map()
新数组替换旧数组

不能检测以下变动的数组

vm.items[indexOfItem] = newValue//是无法渲染页面的

解决方案

Vue.set(example1.items, indexOfItem, newValue)

splice

vm.items.splice(indexOfItem,1,newValue)