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


Posted in Javascript onMarch 30, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 #Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 #Javascript
canvas绘制一个常用的emoji表情
Mar 30 #Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 #Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 #Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 #Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 #Javascript
You might like
php过滤html标记属性类用法实例
2014/09/23 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
前端微信支付js代码
2016/07/25 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python实现获取Ip归属地等信息
2016/08/27 Python
详解django中使用定时任务的方法
2018/09/27 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
python怎么判断模块安装完成
2020/06/19 Python
Python代码注释规范代码实例解析
2020/08/14 Python
python将数据插入数据库的代码分享
2020/08/16 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
新品发布会策划方案
2014/06/08 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js