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 获取对象 定位子对象
May 31 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
javascript定时器完整实例
Feb 10 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 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自动跳转中英文页面
2008/07/29 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php不写闭合标签的好处
2014/03/04 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php常用字符函数实例小结
2016/12/29 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
React Native 图片查看组件的方法
2018/03/01 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
简单了解Python write writelines区别
2020/02/27 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
接待员岗位责任制
2014/02/10 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
《折线统计图》教学反思
2016/02/22 职场文书