Vue.js从0到1：v-for 指令

1. 代码演示

   
   
   
       
       
       
       
   
   
       
   v-for
       
   
       
   
           
   
               
   
                   {{item}}
               
           
           
   
               
   
                   {{item}}
               
           
           
   
           
   
               
   
                   {{index+1}}:{{student.name}} - {{student.age}}
               
           
       
       
   
   
   

2. v-for 代码重点：

   • Vue数组的声明

     data:{
               items:[9,6,4,8,3,10,2,30,7,5,6],  //普通数组
               students:[  //对象数组
                   {name:'Jerry',age:33},
                   {name:'Tom',age:40},
                   {name:'King',age:23}
               ]
          }
     

   • Vue排序

                 computed:{
                     sortItems:function(){
                         return this.items.sort(sortNumber);
                     },
                     sortStudents:function() {
                         return sortByKey(this.students,'age');
                     }
                 }
     

     关键字：Vue计算属性 computed

   • 排序比较方法

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