vue分类筛选filter方法简单实例
内容摘要
这篇文章主要为大家详细介绍了vue分类筛选filter方法简单实例，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文实例为大家分享了vue分
对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文实例为大家分享了vue分
文章正文
这篇文章主要为大家详细介绍了vue分类筛选filter方法简单实例，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文实例为大家分享了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分类筛选filter方法简单实例的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
