<html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div> <ul> <li v-for="item in filterlist">{{item}}</li> </ul> <div @click="agg">加载更多</div> </div> <script src="https://www.jb51.net/js/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { size:5, list:[ {"id":0,"title":"11111","cont":"111111"}, {"id":1,"title":"22222","cont":"111111"}, {"id":2,"title":"33333","cont":"111111"}, {"id":3,"title":"44444","cont":"111111"}, {"id":4,"title":"55555","cont":"55555"}, {"id":5,"title":"66666","cont":"66666"}, {"id":6,"title":"77777","cont":"77777"}, {"id":7,"title":"77777","cont":"88888"}, {"id":8,"title":"888888","cont":"999999"}, {"id":9,"title":"000000","cont":"99999"}, {"id":10,"title":"a88888","cont":"99999"}, {"id":11,"title":"a22222","cont":"111111"}, {"id":12,"title":"a33333","cont":"111111"}, {"id":13,"title":"a44444","cont":"111111"}, {"id":14,"title":"a55555","cont":"55555"}, {"id":15,"title":"a66666","cont":"66666"}, {"id":16,"title":"a77777","cont":"77777"}, {"id":17,"title":"a77777","cont":"88888"}, {"id":18,"title":"a888888","cont":"999999"}, {"id":19,"title":"a000000","cont":"99999"}, {"id":20,"title":"a88888","cont":"99999"} ] }, computed: { filterlist: function () { var num=this.size; return this.list.filter(function (number) { return number.id < num }) } }, methods:{ agg:function(){ this.size+=5; } } }); </script> </body> </html>
vue分类筛选filter方法简单实例
内容版权声明：除非注明，否则皆为本站原创文章。