美文网首页
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

)); 

});

}

相关文章

  • Vue2.0学习笔记v-for(3)

    一、v-for解决模板循环的问题, v-for指令是循环渲染一组data中的数组,如 如果只是想取到值可以这么写 ...

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

    v-for指令是循环渲染一组data中的数组,v-for 指令需要以item in item 形式的特殊语法,it...

  • Vue-(3)循环-计算-监听-样式绑定-事件处理

    一:循环语句 Vue.js 循环语句,循环使用 v-for 指令。v-for 指令需要以 site in site...

  • Vue学习笔记(5)-循环v-for

    在模板中可以用v-for指令来循环数组,对象。 循环数组 循环对象 循环中的坑:保持状态 循环出来的元素,如果没有...

  • VueJS第三课 2 (条件与循环)

    循环语句 循环使用 v-for 指令 v-for 指令需要以 site in sites 形式的特殊语法,菜鸟教程...

  • Vue.js 循环语句

    循环语句 循环使用v-for指令v-for 指令需要以site in sites 形式的特殊语法,sites是源数...

  • vue 学习笔记四

    循环使用 v-for 指令 v-for 指令需要以site in sites形式的特殊语法, sites 是源数据...

  • Vue.js 循环语句

    循环使用 v-for 指令。 v-for 指令需要以site in sites形式的特殊语法, sites 是源数...

  • Vue.js入门整理

    Vue基础 常用指令循环v-for数组v-for="name in arr" , json格式v-for="nam...

  • vue.js学习笔记一

    vue.js循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, s...

网友评论

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

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