接下来将为大家介绍Vue.js中很常用和重要的一个特性——列表渲染

----------------------------------------------------------------------------------

v-for

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以item in items形式的特殊语法，items是源数据数组，而item是数组元素迭代的别名。

#基本用法

<ul id="demo">
   <li v-for="item in items">
     {{ item.name }}
   </li>
</ul>

   var example = new Vue({
     el:'#demo',
     data:{
       items:[
         {name:'Foo'},
         {name:'Bar'}
]
}
})

result：

 

 

 

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

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

--------------------------------------------------------------------------------------

#template v-for

如同v-if 模板，你也可以用带有v-for 的 <template>标签来渲染多个元素块。例如：

<ul>
   <template v-for="item in items">
     <li>{{ item.msg }}</li>
     <li class="divider"></li>
   </template>
</ul>

----------------------------------------------------------------------------------------------

#对象迭代

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

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

   new Vue({
     el:'#demo',
     data:{
       object:{
         FirstName:'Jhon',
         LastName:'Doe',
         Age:30
}
}  
})

result：

 

 

 

---------------------------------------------------------------------------------------------

数组更新检测

#变异方法

变异方法（mutation method），顾名思义，就会会改变被这些方法调用的原始数组。

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

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

你打开控制台，然后就可以用前面例子的 items 数组调用变异方法，如：

demo.items.push({ name:'Baz' });

#重塑数组

相比之下，也有非变异方法，例如：

• filter( );
• concat( );
• slice( );

这些不会改变原始数组，但总是返回一个新数组：

   demo.items = demo.items.filter(function (item){
     return item.name.match(/Foo/);
})

你可能会认为这将导致Vue丢弃现有DOM并重新渲染整个列表。幸运的是，事实并非如戏。Vue实现了一些智能启发式方法来最大化DOM元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

#注意事项

由于JavaScript的限制，Vue不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue;
2. 当你修改数组长度时，例如：vm.items.length = newLength;

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue; 相同的效果，同时也将触发状态更新：

   // Vue.set
   Vue.set(demo.items, indexOfItem, newValue);

   // Array.prototype.splice
   demo.items.splice(indexOfItem, 1, newValue );

为了解决第二类问题，你也同样可以使用 splice：

   demo.items.splice(newLength);

最后想提一点的是关于 显示过滤/排序 的问题；

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。