首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:19:06
字体:
来源:转载
供稿:网友

本文实例为大家分享了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组件学习教程进行学习。

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选