vue学习笔记1

来源:互联网 发布:尚趣玩网络 编辑:程序博客网 时间:2024/06/07 03:19

v-for循环,以及数组,对象的循环

<h1>v-for</h1><hr><div id="app"><!-- 看好了循环谁 --><li v-for="item in sortItems">{{item}}</li><h3>循环对象</h3><hr><ul><!-- 循环对象,index从0开始 --><li v-for="(student,index) in sortStudents">{{index+1}}:{{student.name}}---{{student.age}}</li></ul></div><script type="text/javascript">//data中的数组和compute中的数组同名时会返回最上面的数组var app=new Vue({el:'#app',data:{items:[53,23,7,14,54,36,28],students:[{name:'yang',age:18},{name:'ooog',age:21},{name:'RRRng',age:9},{name:'yFF',age:524}]},computed:{    sortItems:function(){    // 传递参数否则只比较第一位js的bug    return this.items.sort(sortNumber);    },    sortStudents:function(){    return sortByKey(this.students,"age")    } }});//解决js中的bugfunction 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>