Vue基础03_v-for循环排序
v-for指令解决模板循环问题
v-for指令是循环渲染⼀组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
基本⽤法
js写法
数组及对象排序
vue中的排序需要⽤到computed属性
<!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>v-for 实例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for实例</h1>
<hr>
<div id="app">
<ul>
<!-- 需要哪个标签循v-for环就写在哪个标签⾥我们把
items⾥的每⼀个变量赋予item -->
<li v-for="item in items">
{{item}}
</li>
<hr>
<ul>
<li v-for="student in sortStudent">
{{student.name}} - {{student.age}}
</li>
</ul>
</ul>
</div>
<script typt="text/javascript">
var app = new Vue({
el:"#app",
data:{
item:[53,23,79,14,54,18],
students:[
{name:'jspang',age:33},
{name:'panpan',age:28},
{name:'pande',age:25},
{name:'js',age:18},
]
},
computed:{
// computed
items:function(){
return this.item.sort(number);
},
sortStudent:function(){
return sortByKey(this.students,'age')
}
},
})
function number(a,b){
return a-b
}
function sortByKey(array,key){
return array.sort(function(a,b){
sort命令排序var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0))
})
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。