使用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. Kafka运行一段时间报错Too many open files

    Kafka运行一段时间报错Too many open files  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.kafka运行一段时间报错 1>.我最近把kafka集群 ...

  2. 快速掌握Nginx(三) —— Nginx+Systemd托管netcore应用

    以前dotnet web应用程序开发完成后,我们都是使用IIS部署在Windows Server上,如今netcore技术发展迅速,因为其跨平台的特性,将dotnet web应用程序部署在更方便部署和 ...

  3. 《Java》第五周学习总结20175301

    https://gitee.com/ShengHuoZaiDaXue/20175301.git 本周我学习了第六章的内容接口 重要内容有 理解接口 接口参数 面向接口编程 abstract类与接口的比 ...

  4. IE7下使用兼容Icon-Font CSS类

    Iconfont在IE7下需要使用unicode方式,但是这种方式不太方便,使用以下代码可使IE7像普通用法使用. @font-face {font-family: "anticon&quo ...

  5. 面向对象学习（python）

    面向对象总结 一.面向对象与面向过程的区别 面向过程:根据业务逻辑从上到下写垒代码 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 1.面向过程编程: 概念:发过程中最常见的操作就是粘贴 ...

  6. CSS之Background

    实验环境 [Windows 10] Chrome 73.0.3683.103(386,64bit) background作用范围 content+padding 参考文献 [1] CSS backgr ...

  7. python2x和python3的区别

    1,源码的区别 py2x:源码比较混乱,重复代码较多,冗余 py3x: 源码崇尚优美,代码清晰简单 2,用户交互的区别: py2x:python2中input的到的数据类型为int型,Python2x ...

  8. Win10蓝屏的一些解决办法

    请仔细回想这个错误是什么时候出现的: 第一次发生时你对系统做了哪些操作: 发生时正在进行什么操作: 从这些信息中找出可能的原因: 从而选择相应解决方案并尝试排除. 0x0000000A:IRQL_NO ...

  9. Reinforcement Learning Solutions Ed2 Chapter 1 - 2 问题解答

    RL到了第三章题目多的不可思议 前两章比较简单,就在博客随便写写了.之后的用pdf更新. 1.1: Self-play will result different move even from the ...

  10. Harbor修改/data目录位置

    由于harbor默认数据存储位置在/data目录,且修改配置文件操作较为复杂,故这里使用软连接的方式将/data目录文件夹内容映射到/app目录下. ln -s /app/harbor/data/ d ...