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

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

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

时间: 2017-03-29

Vue.js报错Failed to resolve filter问题的解决方法

之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题. 由于先执行的pageList,后执行的Vue的过滤方法,最终调整过的写法: 修改后的正确写法.jpg 作者:=金刚= 文章地址:http://www.cnblogs.com

Vue filter介绍及其使用详解

VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 Vue 过滤器的基本用法 // 注册 Vue.filter('my-filter', function (value) { // 返回处理后的值 }) // getter,返回已注册的过滤器 var myFilter = Vue.filter('my-filter') //在mustache中使用 {{ msg | uppercase }} 或 //在标签中使用 <input type="password&q

Vue filters过滤器的使用方法

本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-

vue2中filter()的实现代码

vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); });1234123 完整代码如下: <!doctype html> <html> <head> <meta charset="UTF-

Java中filter用法完整代码示例

本文研究的主要是Java中filter过滤器的相关用法,具体实现代码如下. filter过滤器主要使用于前台向后台传递数据是的过滤操作.程度很简单就不说明了,直接给几个已经写好的代码: 一.使浏览器不缓存页面的过滤器 import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 用于的使 Browser 不缓存页面的过滤器 */ public cla

javaweb设计中filter粗粒度权限控制代码示例

1 说明 我们给出三个页面:index.jsp.user.jsp.admin.jsp. index.jsp:谁都可以访问,没有限制: user.jsp:只有登录用户才能访问: admin.jsp:只有管理员才能访问. 2 分析 设计User类:username.password.grade,其中grade表示用户等级,1表示普通用户,2表示管理员用户. 当用户登录成功后,把user保存到session中. 创建LoginFilter,它有两种过滤方式: 如果访问的是user.jsp,查看sess

详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

Angularjs 1.3 中的$parse实例代码

这次我们来看一下angular的Sandboxing Angular Expressions.关于内置方法的,核心有两块:Lexer和Parser.其中大家对$parse可能更了解一点.好了不多废话,先看Lexer的内部结构: 1.Lexer //构造函数 var Lexer = function(options) { this.options = options; }; //原型 Lexer.prototype = { constructor: Lexer, lex: function(){}

详解如何在Vue2中实现组件props双向绑定

Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

PHP中filter函数校验数据的方法详解

介绍PHP中filter函数校验数据的方法详解,PHP过滤器包含两种类型:Validation用来验证验证项是否合法 .Sanitization用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除. input_filters_list() 用来列出当前系统所支持的所有过滤器. 复制代码 代码如下: <?php foreach(filter_list() as $id => $filter) {     echo $filter.' '.filter_id($filter).

jquery中filter方法用法实例分析

本文实例讲述了jquery中filter方法用法.分享给大家供大家参考.具体分析如下: filter()方法将匹配元素集合缩减为匹配指定选择器的元素. filter方法中的参数可以为字符串值,包含供匹配当前元素集合的选择器表达式.   一.filter的参数类型可分为两种   1.传递选择器 $('a').filter('.external')   2.传递过滤函数 复制代码 代码如下: $('a').filter(function(index) {         return $(this)

在Python web中实现验证码图片代码分享

系统版本: CentOS 7.4 Python版本: Python 3.6.1 在现在的WEB中,为了防止爬虫类程序提交表单,图片验证码是最常见也是最简单的应对方法之一. 1.验证码图片的生成   在python中,图片验证码一般用PIL或者Pillow库实现,下面就是利用Pillow生成图片验证码的代码: #!/usr/bin/env python3 #- * -coding: utf - 8 - * -#@Author: Yang#@ Time: 2017 / 11 / 06 1: 04 i

vue2中的keep-alive使用总结及注意事项

keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM.结合vue-router中使用,可以缓存某个view的整个内容. 基本使用如下: <keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive> 一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页