使用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. App测试的策略

    (一).App测试的策略 1.App测试需要考虑的方面     设备多样性     操作系统.浏览器.应用程序运行时环境.屏幕分辨率.人机交互界面和接口.人体工程学设计.屏幕尺寸等     运营商网络 ...

  2. [图解Java]Condition

    图解Condition 0. demo 我先给出一个demo, 这样大家就可以根据我给的这段代码, 边调试边看源码了. 还是那句话: 注意"My" , 我把ReentrantLoc ...

  3. 整理一些vue elementui 问题 + 链接方法

    1.前端通过spark-md5.js计算本地文件md5 2.vue如何利用自定义的事件,在子组件中修改父组件里边的值 3.vue子组件获取父组件的内容(props属性) 4.Element ui se ...

  4. Date Structure01-绪论作业

    一.作业题目 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数). 有理数基本运算:1.构造有理数T,元素e1,e2分别被赋以分子.分母值2 ...

  5. [Jetty] Debugging With Eclipse

    There are a number of options available to debug your application in Eclipse. If not done already pr ...

  6. Lucene的中文分词器

    1 什么是中文分词器 学过英文的都知道,英文是以单词为单位的,单词与单词之间以空格或者逗号句号隔开. 而中文的语义比较特殊,很难像英文那样,一个汉字一个汉字来划分. 所以需要一个能自动识别中文语义的分 ...

  7. 记我在github上参与的Star增长最快的十万级项目。。。

    前言 GitHub作为程序员的圣地. 用了两三年,一直都觉得,他可以代码托管,项目管理,为项目建立静态主页,个人简历,找工作,面试加分. 然而>>>....昨天才认识到我还是太年轻, ...

  8. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  9. css3新单位vw、vh、vmin、vmax的使用详解(转载)

    文章传送门: https://blog.csdn.net/ZNYSYS520/article/details/76053961

  10. opcourse sql布尔盲注 WP复现

    当时做这题的时候,写了脚本,用的if(mid())<>来爆破的,可能因为写脚本不擅长,写的太乱了,直接把payload写进mid里,整个一堆,然后括号对着WP看的时候,少了好几个括号,导致 ...