本文实例为大家分享了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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
