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组件学习教程进行学习。

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

赞 (0)

相关推荐

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

    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-

  • 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

  • vue2中filter()的实现代码

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

  • Vue filter介绍及其使用详解

    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.js报错Failed to resolve filter问题的解决方法

    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方法简单实例

    本文实例为大家分享了vue分类筛选filter方法的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist"

  • vue之浏览器存储方法封装实例

    如下所示: export function isObject (val) { return val !== null && typeof val === 'object' } export function setStore (key, val, type = 'localStorage') { if (isObject(val)) window[type].setItem(key, JSON.stringify(val)) else window[type].setItem(key, v

  • jQuery中filter()方法用法实例

    此方法能够筛选出与指定表达式或者方法返回值相匹配的元素或者元素集合. 语法结构一: 筛选出与指定表达式匹配的元素集合. 复制代码 代码如下: $(selector).filter(expr) 参数列表: 参数 描述 expr 字符串值,用于筛选当前元素集合的选择器表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name

  • jquery中filter方法用法实例分析

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

  • mysql 实现互换表中两列数据方法简单实例

    由于最近项目,有这样一个需求,是把数据库中的两列数据互换,经过好久才搞定,这里写个简单实例,做过记录. 1.创建表及记录用于测试 CREATE TABLE `product` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '产品id', `name` varchar(50) NOT NULL COMMENT '产品名称', `original_price` decimal(5,2) unsigned NOT NULL COMMEN

  • R语言列筛选的方法select实例详解

    R语言列筛选的方法select实例详解

    目录 前言 1. 数据描述 2. 使用R语言默认的方法:列选择 3. tidyverse的rename函数 4. tidyverse的select函数 5. select函数注意事项 5.1 绝对引用函数 5.2 放到环境变量中 6. 提取h开头的列 7. 提取因子和数字的列 总结 前言 我们知道,R语言学习,80%的时间都是在清洗数据,而选择合适的数据进行分析和处理也至关重要,如何选择合适的列进行分析,你知道几种方法? 如何优雅高效的选择合适的列,让我们一起来看一下吧. 1. 数据描述 数据来

  • jquery中checkbox使用方法简单实例演示

    jquery中checkbox使用方法简单实例演示

    和大家分享一段基于jQuery实现checkbox列表全选.反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等).文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者. 引入jquery库 <script src="ajax/libs/jquery/1.10.2/jquery.min.js"></script> 构建HTML 一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,

  • Android使用vcard文件的方法简单实例

    本文实例讲述了Android使用vcard文件的方法.分享给大家供大家参考,具体如下: FileOutputStream os = null; try { os = VCardTest.this.openFileOutput("Android.vcf", MODE_PRIVATE); } catch (FileNotFoundException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } Output

  • Vue.js路由实现选项卡简单实例

    Vue.js路由实现选项卡简单实例

    本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下 需要实现下图效果,点击上方选项卡,切换到不同内容的组件: 事先准备好两个库文件(vue.js.vue-router.js),放到对应路径. 1.引入依赖库 <script src="vue.js" type="text/javascript" charset="GBK"></script> <script src="vue-

  • 非常好用的JsonToString 方法 简单实例

    非常好用的JsonToString方法Jsontostring代码 复制代码 代码如下: function JsonToString(o) {        var arr = [];     var fmt = function(s) {         if (typeof s == 'object' && s != null) return JsonToStr(s);         return /^(string|number)$/.test(typeof s) ? "

随机推荐