VueJS----[内部指令-1.3]----v-for指令 ：解决模板循环问题
v-for指令 ：解决模板循环问题
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
基本语法：
<li v-for="item in items">
{{item}}
li>js写法：
var app=new Vue({
el:'#app',
data:{
items:[12,2,6,4,24,6,56]
}
})这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，需要哪个html标签循环，v-for就写在那个上边。
排序：
当我们需要对显示的数据进行排序时，可以用到Vue的compueted属性
computed:{
sortItems:function(){
return this.items.sort();
}
}我们要在computed中声名一个对象sotrItems,如果不声名，会报错，这时要将循环的那个数据改成排序后的sotrItems数组。
到这 ，如果一切顺利的话，会看到结果，但是还有一个小bug，当我们把数组中的值随便改一个，排序结果会吧修改后的那个数值放在最后，很显然不是我们想要的，因此需要写一个方法sortNumber来解决这个bug。
function sortNumber(a,b){
return a-b
}用法：
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}现在这个排序是ok的。
对象循环输出
我们在做项目的时候经常会将对象数组进行遍历，那么我们就先看一下是如何进行遍历的。
1.先定义一个数组，数组里是对象数据
students:[
{name:'Cheny',age:21},
{name:'Boom',age:19},
{name:'ChenDaYong',age:17},
{name:'Chen',age:16}
]在模板中输出：
<ul>
<li v-for="stu in students">
({{index}}:){{stu.name}},{{stu.age}}
li>
ul>也可以加入索引
<ul>
<li v-for="(stu,index) in sortStudents">
({{index}}:){{stu.name}},{{stu.age}}
li>
ul>完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-fortitle>
<script type="text/javascript" src="../assets/js/vue.js">script>
head>
<body>
<h1>v-forh1>
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}}
li>
ul>
<ul>
<li v-for="(stu,index) in sortStudents">
({{index}}:){{stu.name}},{{stu.age}}
li>
ul>
div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
items:[12,2,6,4,24,6,56],
students:[
{name:'Cheny',age:21},
{name:'Boom',age:19},
{name:'ChenDaYong',age:17},
{name:'Chen',age:16}
]
},
computed:{
sortItems:function(){
return this.items.sort(sortNumbers);
},
sortStudents:function(){
return sortByKey(this.students,'age');
}
}
});
function sortNumbers(a,b){
return a-b;
}
//数组对象的排序方法
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x1 :((x>y)?1:0));
});
}
script>
body>
html>