首页 > 代码库 > v-for 指令：解决模板循环问题
v-for 指令：解决模板循环问题
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>v-for 实例</title>
<script type="text/javascript" src="http://www.mamicode.com/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,index) in sortStudents">
{{index+1}}:{{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:‘#app‘,
data:{
items:[53,23,7,14,54,36,28],
students:[
{name:‘Xurui‘,age:22},
{name:‘Xu‘,age:1},
{name:‘rui‘,age:18},
{name:‘yaya‘,age:6},
]
},
computed:{
sortItems:function(){
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>
v-for 指令：解决模板循环问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。