首页 / VUE / vue分类筛选filter方法简单实例
vue分类筛选filter方法简单实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue分类筛选filter方法简单实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1702字，纯文字阅读大概需要3分钟。
内容图文
本文实例为大家分享了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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue分类筛选filter方法简单实例全部内容，希望文章能够帮你解决vue分类筛选filter方法简单实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】