Vue列表渲染的示例代码

用v-for把一个数组对应为一个组件元素

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法：

<ul> <li v-for="item in items">  {{ item.message }} </li></ul>var vm = new Vue({ el: '#el', data: {  items: [   {message: 'foo'},   {message: 'boar'}  ] }})

在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。

<ul> <li v-for="(item, index) in items">  {{ item.message }} {{ index }} </li></ul>var vm = new Vue({ el: '#el', data: {  items: [   {message: 'foo'},   {message: 'bar'}  ] }})

也可以用of替代in作为分隔符，因为它是最接近JavaScript迭代器的语法：

<div v-for="item of items"></div>

一个对象的v-for

也可以使用v-for通过对一个对象的属性迭代。

new Vue({ el: '#el', data: {  object: {   firstName: 'h',   lastName: 'z',   age: 26  } }})<ul id="v-for-object" class="demo"> <li v-for="value on object">  {{ value }} /li></ul>

也可以提供第二个参数为名：

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

第三个参数为索引：

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

Key

当Vue使用v-for正在更新已渲染过的元素列表时，它默认就地复用。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单的复用此处每个元素，并且 确保它在特定索引下显示已被渲染过的每个元素。

这个默认的模式是高效的，但只适用于不依赖子组件状态或零时DOM状态的列表渲染输出。

为了给Vue一个提示，以便追踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。理想的key值是每项都有唯一id。它的工作方式类似于一个属性，所以你需要用v-bind来绑定动态值：

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

建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上提升。

数组更新检测

(1)变异方法

Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()pop()shift()unshift()splice()sort()reverse()

(2)替换数组

变异方法，是会改变被这些方法调用的原始数组。相比之下也有非变异方法：