AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
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组件学习教程进行学习。

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


vue,分类,筛选,filter  
上一篇:ES6中Proxy与Reflect实现重载(overload)的方法  下一篇:教你快速搭建Node.Js服务器的方法教程