1、v-for循环实例：依次输出data数据的items的所有数值
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-for实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>v-for实例</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里 -->
<ul>
<!-- v-for写到要循环的那个标签上 -->
<li v-for='item in items'>
{{item}}
</li>
</ul>
</div>
<script type='text/javascript'>
//声明变量且实例化(生成器)
var app =new Vue({
el:'#app',
data:{
items:[6,56,64,2,7,43,5]
}
})
</script>
</body>
</html>2、Vue：利用v-for语句+自定义排序函数实现data内students数据表，按照age列自动排序
(1)、index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js实例</title>
</head>
<body>
<h1>Vue2.0实例</h1>
<hr>
<ol>
<li><a href='./example/helloword.html'>Hello World实例</a></li>
<li><a href='./example/v-if.html'>v-if&v-else&v-show</a></li>
<li><a href='./example/v-for.html'>v-for实例</a></li>
</ol>
</body>
</html>(2)、v-for.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-for实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>v-for实例</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里 -->
<ul>
<!-- v-for写到要循环的那个标签上 -->
<li v-for='item in sortitems'>
{{item}}
</li>
</ul>
<hr>
<ul>
<li v-for='(student,index) in sortStudents'>
{{index+1}}:{{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script type='text/javascript'>
//声明变量且实例化(生成器)
var app =new Vue({
el:'#app',
data:{
items:[61,6,64,22,72,43,5],
students:[
{name:'Andrew Ng',age:'42'},
{name:'Jason Niu',age:'25'},
{name:'Geoffrey Hinton',age:'76'}
]
},
computed:{
sortitems:function(){
// return [1,2,3,4,5,6,7];
// return this.items.sort(); //首字符排序
//所有的Js默认都是首字符排序。加上自定义的可以改为数值整体排序。
return this.items.sort(sortNumber);
},
sortStudents:function(){
return sortByKey(this.students,'age');
}
}
});
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>