使用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. 【转载】Nginx + Tomcat 实现反向代理

    通常的代理服务器,只用于代理内部网络对Internet的连接请求,客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中由代理服务器向Internet上的web服 ...

  2. Vue打包优化之分析工具webpack-bundle-analyzer

    // 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...

  3. PMP知识点（五）——资源管理表示方法

    资源矩阵 最常用的为RACI责任矩阵 如下: 资源数据表: 即时间和资源类型的交叉表,是资源直方图的拓展: 资源甘特图: 一种是以任务为索引 一级目录为任务,二级目录为资源,横坐标为时间进度 一种是以 ...

  4. windows查看已连接WIFI密码

    找到wifi图标. 右键,选择打开“网络和internet设置”,选择状态. 选择更改适配器设置. 选择你所连接的WIFI网络. 右键,选择状态. 选择无线属性. 选择安全. 勾选显示字符.

  5. 题解 P1496 【火烧赤壁】

    蒟蒻的第一篇题解,其实这道题是标准的离散化,模拟可以过,但是就没有训练效果了.我们首先先看数据,n<=20000,数据不多,但是范围大(-10^9<=Ai,Bi<=10^9),这时, ...

  6. Windows 查找txt后缀 文件复制

    Windows 查找文件 并且复制目录 for /f "delims==" %a in ('dir /b /s F:\F\*.TXT')do copy /-y "%a&q ...

  7. Java多线程访问共享资源类及类之间关系设计

    1.涉及的类 多线程类.共享资源存储类 2.类之间的关系 (1)共享资源存储类作为线程类的全局成员变量,在线程初始化时,通过setter或者构造注入(当然此处是同一个共享资源类对象),实现多个线程共享 ...

  8. （四）ORBSLAM运动估计

    ORBSLAM2的运动估计简介 ORBSLAM2中的运动估计核心方法就是3D-2D的PNP,而在跟踪过程主要分为三种类型: 无运动模型的跟踪,即基于参考帧的跟踪: 基于匀速运动模型的跟踪: 重定位: ...

  9. 读spring源码(二)-XmlBeanDefinitionReader-解析BeanDefinition

    上次说到ApplicationContext加载BeanDefinition时会创建一个XmlBeanDefinitionReader,将XML解析.BeanDefinition加载委托给XmlBea ...

  10. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...