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前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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

# vue # 分类筛选 # filter # Vue.js实现多条件筛选、搜索、排序及分页的表格功能 # vuejs实现本地数据的筛选分页功能思路详解 # 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能) # vue+elementUI实现表格关键字筛选高亮 # VUE实现移动端列表筛选功能 # vue商城中商品“筛选器”功能的实现代码 # vue实现前端列表多条件筛选 # vue+element table表格实现动态列筛选的示例代码 # vue3自定义动态不同UI组件筛选框案例 # 已被 # 请大家 # 欢迎大家 # 大家分享 # 具体内容 # 大家多多 # 加载 # agg # src # script # click # li # ul # filterlist # item # js

返回目录在线咨询

上一篇：软件php源码怎么搭建_软件php源码搭建环境与配置法【教程】
下一篇：如何确保我的Bluehost网站安全并防范常见网络攻击？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求