本文實例為大家分享了vue分類篩選filter方法的具體代碼，供大家參考，具體內容如下
<html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist">{{item}}</li> </ul> <div @click="agg">加載更多</div> </div> <script src="../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.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
