v-for指令 ：解决模板循环问题

　　v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

    
         
         
                 
Hello World!
    
     
    
     
          　　
      
        　　　　　　
       
 　　　　　　　　{
    {item}} 　　　　　　
 　　　　
      
 
     
    

　　我们在js中定义了一个数组items，当我们需要在哪里循环的时候，我们就将v-for写在哪里，上面我们需要将items中的元素循环排列在ul>li中，所以我们在li中写了 

 那么我们如何将items中的元素按照大小顺序依次排列呢？

　　在此，我们又用到了Vue中的另一个属性computed(计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。),并且我在其内定义了一个方法函数。

computed:{    sortItems:function(){        return this.items.sort();    }}

　　而当我们再次执行的时候，我们会发现一个在js中非常常见的错误，那就是排列的顺序会是 15，2，21，25，30，42，54，69，85.那为什么2会排在15的后面呢？这是js中的一个bug，它只按照第一个字符的ASC码的大小排序，而不是两个数作大小比较。那么我们就需要添加一个函数，按照大小顺序排列。

function sortNum(a,b){    return a-b;}

　　上面的代码就可以通过计算两值的大小来排序，然后我们将其引入到computed中。

computed:{    sortItems:function(){        return this.items.sort(sortNum);    }}

　　那么我们获得的就是按照大小排序的值了。

 

当我们循环的是对象，又如何正确输出呢？

　　我们先随便定义一个数组，其内容不必在意。

students:[    {name:"小明",age:12},    {name:"小红",age:14},    {name:"小凡",age:16},    {name:"小乔",age:18},    ]

　　而我们又在模版中添加v-for指令。

     
    
      
        {
    {student}}    
     

　　同时，我们加入一个原生的对象形式的数组排列方法。

//数组对象方法排序:function sortByKey(array,key){    return array.sort(function(a,b){      var x=a[key];      var y=b[key];      return ((x
     
      y)?1:0));   });}
     

　　且在computed中进行数组调用排序。

sortStudent:{        return this.sortByKey(this.students,'age');}

　　最后得到的就是按照年纪大小排序的结果了。