使用computed 方法来过滤筛选数据;也可以使用methods 方式来筛选过滤数据

代码如下:

<body>
  <div id="app">
    <ul>
      <li v-for="item in list">{{item.n}}</li>
    </ul>
    <ul>
      <li v-for="item in listCmputed">{{item.n}}</li>
    </ul>
    <ul>
      <li v-for="item in listMe(list)">{{item.n}}</li>
    </ul>

  </div>
</body>
<script>
  var app=new Vue({
  el:'#app',
  data:{
    list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
  },
  computed:{
    listCmputed:function(){
      return this.list.filter(function(item){
        return item.n>=33
      })
    }  / /44,55,66
  }, 
  methods:{
    listMe:function(list){
      return list.filter(function(item){
        return item.n<=33
      })
    } / /11,22,33
  }
})
</script>

vue分类筛选方法,filer的更多相关文章

  1. Echarts图表插件(4.x版本)使用(二、带分类筛选的多个图表/实例化多个ECharts,以关系图/force为例)

    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...

  2. PHP无限极分类生成树方法,无限分级

    你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. function g ...

  3. PHP无限极分类生成树方法

    你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,整理分享了. function genera ...

  4. 分享一个牛逼的PHP无限极分类生成树方法,巧用引用(转)

    你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. function g ...

  5. (转)smarty实现多级分类的方法

    --http://www.aspku.com/kaifa/php/44679.html 这篇文章主要介绍了smarty实现多级分类的方法,涉及循环读取的技巧,非常具有实用价值,需要的朋友可以参考下   ...

  6. destoon实现调用当前栏目分类及子分类和三级分类的方法

    调用当前栏目分类及子分类和三级分类是程序设计里常用的方法,本文就来详细讲述destoon实现调用当前栏目分类及子分类和三级分类的方法.具体操作如下: 在destoon中提供了如下的调用语句: 一级分类 ...

  7. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  8. jq筛选方法

    jq筛选方法(参照手册) 过滤: 1) eq(index|-index):获取第N个元素 负值表示从末尾开始匹配 <!-- 获取匹配的第二个元素 --> <p> This is ...

  9. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

随机推荐

  1. HTTP协议6之状态码--转

    HTTP状态码,我都是现查现用. 我以前记得几个常用的状态码,比如200,302,304,404, 503. 一般来说我也只需要了解这些常用的状态码就可以了.  如果是做AJAX,REST,网络爬虫, ...

  2. 快速掌握Nginx(四) —— Nginx日志切片和常用配置总结

    1.Nginx日志管理 1.日志简单介绍 Nginx提供了日志记录的功能,日志文件在对我们管理网站十分有用,通过访问日志(access_log)我们可以获取请求来源.客户端信息.请求的资源等信息:通过 ...

  3. day23单例模式 , 日志处理 , 项目结构目录

    # day23笔记 ## 一.补充,作业 ### 1.字符串格式化 ```pythonmsg = "我是%(n1)s,年龄%(n2)s" % {'n1': 'alex', 'n2' ...

  4. nginx资料汇总

    nginx docker 中的一些目录和 windows下是不同的, 静态内容目录: /usr/share/nginx/html 配置文件目录: /etc/nginx 日志输出目录: /var/log ...

  5. js拖拽案例、自定义滚动条

    简单实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  6. lambda+mutable配合move实现单函数多程序域

    主代码 //-----------------------------------说明一的代码 void fun0{ int t = 10; auto loopFun = [=]() mutable{ ...

  7. 关于JDK1.7+中HashMap对红黑树场景的思考

    背景 在1.7之前的版本,当数组元素较多(几百.几千,或者更多)的时候,在这种前提扩容,涉及全量元素的遍历和坐标的重新定位,这个耗时会比较长.这是之前存在的一个弊端吧.那么引入红黑树之后就解决了问题, ...

  8. es集群数据库~运维相关

    一 数据同步方案  1 ES-JDBC  不能实现删除同步操作.MYSQL如果删除,ES不会删除  2 logstash-input-jdbc  能实现insert update,但是仍然不能实现删除 ...

  9. RNN,写起来真的烦

    曾经,为了处理一些序列相关的数据,我稍微了解了一点递归网络 (RNN) 的东西.由于当时只会 tensorflow,就从官网上找了一些 tensorflow 相关的 demo,中间陆陆续续折腾了两个多 ...

  10. React(17)异步组件

    26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...