v-for循环
注意：那个标签循环，写到哪个标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for 实例</title>
<!--引入Vue.js-->
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for实例</h1>
<hr>
排序的用法：
<div id="app">
<ul>
<li v-for="item in sortItems">
{{ item }}
</li>
</ul>
<hr>
输出数组中的对象：
<ul>
<li v-for="student in students">
{{ student.name}}:{{ student.age }}岁
</li>
</ul>
<hr>
有下标的方式：
<ul>
<li v-for="(student,index) in students">
{{index+1}}、{{ student.name}}:{{ student.age }}岁
</li>
</ul>
<hr>
对象形式的排序（按照年纪）：
<ul>
<li v-for="(student,index) in sortStudents">
{{index+1}}、{{ student.name}}:{{ student.age }}岁
</li>
</ul>
</div>
<!--实例化Vue-->
<script type="text/javascript">
var app=new Vue({
el:'#app',//选中id=app的元素
data:{//声明参数,data是一个对象，对象里面是一个数组属性
items:[20,23,18,65,32,19,54,56,7],
students:[
{name:'lilei',age:18},
{name:'hanmeimei',age:17},
{name:'yang',age:16},
{name:'pangzi',age:15},
{name:'bendan',age:14},
]
},
computed:{//在输出items之前做一个排序运算
sortItems:function(){ //sortItems是函数返回值，返回的对象不能和items同名
return this.items.sort(sortNumber);//this是Vue对象,括号内声明排序的方式
},
sortStudents:function(){
return sortByKey(this.students,'age');//this是Vue对象
}
}
})
//有了这个函数，才能正常排序
function sortNumber(a,b) {
return a-b;
}
//数组对象方法排序:
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>
</body>
</html>
