### 基本用法：
`v-for`指令是循环渲染一组 data 中的数组，`v-for` 指令需要以 `item in items` 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
**模板写法**
~~~html
<li v-for="item in items">
{{item}}
</li>
~~~
**js写法**
~~~html
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
~~~
完整代码：
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
</body>
</html>
~~~
这是一个最基础的循环，先在 js 里定义了 items 数组，然后在模板中用 `v-for` 循环出来，需要注意的是，你需要那个 html 标签循环，v-for 就写在那个上边。
二、排序
我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了 Vue 的 computed 属性。
~~~
computed:{
sortItems:function(){
return this.items.sort();
}
}
~~~
我们在 computed 里新声明了一个对象 sortItems ，如果不重新声明会污染原来的数据源，这是Vue 不允许的，所以你要重新声明一个对象。
如果不重新声明报错：
如果一切顺利的话，你已经看到了结果，但是这个小程序还是有个小Bug的，现在我把数组修改成这样。
~~~javascript
items:[20,23,18,65,32,19,5,56,41]
~~~
我们把其中的54修改成了5，我们再看一下结果，发现排序结果并不是我们想要的。
我们可以自己编写一个方法sortNumber，然后传给我们的sort函数解决这个Bug。
~~~javascript
function sortNumber(a,b){
return a-b
}
~~~
**用法**
~~~javascript
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
~~~
经过一番折腾，我们终于实现了真正的数字排序，这是在工作中非常常用的，一定要学好，记住。
### 对象循环输出
我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组，数组里边是对象数据
~~~javascript
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
~~~
**在模板中输出**
~~~html
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
~~~
**加入索引序号：**
~~~html
<ul>
<li v-for="(student,index) in students">
{{index}}：{{student.name}} - {{student.age}}
</li>
</ul>
~~~
排序，我们先加一个原生的对象形式的数组排序方法：
**数组对象方法排序:**
~~~javascript
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));
});
}
~~~
有了数组的排序方法，在computed中进行调用排序
~~~javascript
sortStudent:function(){
return sortByKey(this.students,'age');
}
~~~
