为了账号安全,请及时绑定邮箱和手机立即绑定

使用vue实现数组对象排序

标签:
Vue.js

从网上找到的例子用vue来实现数组对象排序

<!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</title>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script></head><body>    <div class="app">            <h1>vue</h1>            <hr>            <ol>                <li v-for="number in sortNumbers">{{number}}</li>            </ol>            <hr>            <ul>                <li v-for="(student,index) in  sortstudents">{{index+1}}:{{student.name}}-{{student.age}}</li>            </ul>    </div>          <script>                new Vue({                    el:'.app',                    data:{                                numbers:[5 ,8, 88, 56, 28, 61, 9],                                students:[                                     {name:'zs',age:'38'} ,                                     { name:'ls',age:'29'},                                     {name:'mike',age:'32'},                                ]                     },                    computed:{                            sortNumbers:function(){                                        return this.numbers.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];                            console.log(x,y)                            return((x>y)?-1:((x<y)?1:0));                    })            }    </script></body></html>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消