一、v-for解决模板循环的问题,
v-for指令是循环渲染一组data中的数组,如

- 如果只是想取到值可以这么写 value in myData
- 如果要取到值和index:(value,index) in myData
写法如下:
<div id="app">
<ul>
<li v-for="items in myDatas">{{items}}</li>
</ul>
<hr>
<ul>
<li v-for="(student,index) in sortStudent">
{{index}}:{{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
myData:[2,3,44,444,1,444,8,9],
students:[
{name:'小明',age:18},
{name:'小红',age:28},
{name:'小黄',age:20},
{name:'小黑',age:15}
]
},
computed:{
myDatas:function(){
return this.myData.sort(sortNumber);
// return [1,2,3,4,5,5,5]
},
sortStudent:function(){
return sortByKey(this.students,'age');
}
}
});
function sortNumber(a,b){
return b-a;
}
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
发现vue2.0跟之前的版本还是有点不一样的,改天再写写不一样的地方加深印象。
注意:在哪循环就把v-for指令写到哪个标签上,比如你要在li上循环数组,就不要把v-for写在ul上
二、给输出的数组进行排序
用到了Vue的computed属性。
computed:{
myDatas:function(){
return this.myData.sort(sortNumber);
// return [1,2,3,4,5,5,5]
},
sortStudent:function(){
return sortByKey(this.students,'age');
}
}


vue有种保护机制,如果在data中声明了一个属性比如这个例子的myData,然后再computed中不是赋值而是编程,为了保护data里的myData,所以不允许这样做,要重新命名一个跟myData不一样的名。输出的是新命名的数组。

为何要传一个函数给sort()?我的疑问,js基础不好,mdn走起!


三、对象循环输出
<ul>
<li v-for="(student,index) in sortStudent">
{{index}}:{{student.name}}-{{student.age}}
</li>
</ul>
大牛写了个对象排序的方法,自己好好消化
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
四、遇到的问题或者犯的低级错误
1、因为传入的数组没有加this,所以报了students not defined的错,粗心大意


五、最后
vue低版本中 data里面的myData和computed里面可以一样,但是高版本,是不允许相同名称。
还得努力呀,进度有点慢了,就是起不来,就是不能集中精力,春节就是这样,真的是人最懒的一周了
网友评论