美文网首页
v-for指令:解决模板循环问题

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

作者: 紫由袅 | 来源:发表于2017-08-17 17:24 被阅读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

    )); 

    });

    }

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/azdnrxtx.html