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 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
Vue实现简单的留言板
Oct 23 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.ini中文版
2006/10/09 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
电大自我鉴定范文
2013/10/01 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
学年自我鉴定
2014/01/16 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
建筑工地宣传标语
2014/06/18 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
先进个人评语大全
2015/01/04 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技