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

2017-08-17  本文已影响88人  紫由袅

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


数组循环与排序: 

var app = new Vue({

el:"#app",

data:{

items:[29,2,45,24,5],

},

//注意data为了保护数据是不允许计算属性修改的,如果你要修改只能重新命名sortItems

computed:{

sortItems:function(){

return this.items.sort(sortNumber);

}

}

});

//到这里排序没有问题,但是如果把其中的数据修改成一位数的数字,排序出现问题,这是js存在的坑,

//所以为了解决这个坑我们可以自己编写一个方法sortNumber,然后传给我们的sort函数解决这个Bug。

function sortNumber(a,b){

return  a-b ;

}


对象循环输出:

{{index+1}}:{{sortResearcher.name}}-{{sortResearcher.age}}

var app = new Vue({      

 el:"#app",    

      data:{                           

  researchers:[               

  {name:'pang',age:50},

 {name:'panda',age:20},     

  {name:'panpan',age:10},   

  {name:'kang',age:30},         

    ]     

    },       

  //注意data为了保护数据是不允许计算属性修改的,如果你要修改只能重新命名           computed:{                           

sortResearchers:function(){         

        return sortByKey(this.researchers,'age');       

      }   

      }   

  });       

 //数组对象方法排序:

function sortByKey(array,key){ 

  return array.sort(function(a,b){   

  var x=a[key];     

var y=b[key];     

return ((xy)?1:0

)); 

});

}

上一篇下一篇

猜你喜欢

热点阅读