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
));
});
}
网友评论