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 相关文章推荐
读jQuery之八 包装事件对象
Jun 21 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
vue路由插件之vue-route
Jun 13 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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面向对象编程快速入门
2006/12/14 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
JS查看对象功能代码
2008/04/25 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python中IPYTHON入门实例
2015/05/11 Python
pandas string转dataframe的方法
2018/04/11 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python关于变量名的基础知识点
2020/03/03 Python
python如何求圆的面积
2020/07/01 Python
用 python 进行微信好友信息分析
2020/11/28 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
检讨书范文
2015/01/27 职场文书
贷款工资证明范本
2015/06/12 职场文书
四年级作文之植物
2019/09/20 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
nginx配置指令之server_name的具体使用
2022/08/14 Servers