vue分类筛选filter方法简单实例

编程学习 2021-07-04 18:31www.dzhlxh.cn编程入门
这篇文章主要介绍了vue分类筛选filter方法的简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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组件的教程,请大家点击专题进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板