使用computed 方法来过滤筛选数据;或者使用methods 方式来筛选过滤数据

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

  

vue遍历数据是对数据进行筛选 过滤 排序的更多相关文章

  1. Vue.js与angular在数据实现的思考

    Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...

  2. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  3. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  4. 【转载】使用Pandas对数据进行筛选和排序

    使用Pandas对数据进行筛选和排序 本文转载自:蓝鲸的网站分析笔记 原文链接:使用Pandas对数据进行筛选和排序 目录: sort() 对单列数据进行排序 对多列数据进行排序 获取金额最小前10项 ...

  5. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  6. PourOver – 快速筛选和排序大的数据集合

    PourOver 是一个用于对大数据集合进行快速过滤的 JavaScript 库.它可以在60fps下运行,允许您构建数据研究应用和档案,即不必等待一个数据库调用来呈现查询结果. PourOver 基 ...

  7. 遍历Dataset并输出数据实例

    转自:http://www.cnblogs.com/csdm/archive/2010/02/02/1661808.html <%@ Page Language="C#" A ...

  8. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  9. 使用for in循环遍历json对象的数据

    使用for in遍历json对象数据,如果数据中的名称有为数字的话,只对正整数有效,那么先会输出为正整数的数据,后面其他的会按照原来数据中定义的顺序不变输出. 针对名称为数字的json对象数据进行测试 ...

随机推荐

  1. Evolutionary approaches towards AI: past, present, and future

    Evolutionary approaches towards AI: past, present, and future 2019-10-06 07:28:13 This blog is from: ...

  2. 认真分析mmap:是什么 为什么 怎么用(转)

    阅读目录 mmap基础概念 mmap内存映射原理 mmap和常规文件操作的区别 mmap优点总结 mmap相关函数 mmap使用细节 回到顶部 mmap基础概念 mmap是一种内存映射文件的方法,即将 ...

  3. 【PHP+nginx+php-fpm】探讨它们的运行机制和原理

    1.PHP+nginx+php-fpm的运行机制和原理 Nginx 是非阻塞IO & IO复用模型,通过操作系统提供的类似 epoll 的功能,可以在一个线程里处理多个客户端的请求.(非阻塞, ...

  4. Oracle 日期各个部分常用写法

    --1.日期的各部分的常用的的写法 --- --1) 取时间点的年份的写法: SELECT TO_CHAR(SYSDATE,'YYYY') FROM DUAL; --结果:2019 --2) 取时间点 ...

  5. 019 spring social

    1.原理 2. 3. 4.

  6. 微信支付:URL未注册问题

    起因:一个项目已经做好了,微信支付也调通的,域名 www.xxxx.com ,某天客户需要换域名,改为weixin.xxxx.com, 原先的www转向客户自己的官网,结果换了之后,发现微信支付出错: ...

  7. Python 使用 paho-mqtt

    https://blog.csdn.net/weixin_41656968/article/details/80848542 https://blog.csdn.net/lhh08hasee/arti ...

  8. [K8s] Kubernetes 是什么 不是什么

    现在有三种部署方式,传统物理机部署.虚拟机部署.容器化部署. 我们现在所使用的云上服务器一般都是虚拟化出来的,硬件资源独立,操作系统等软件资源亦独立. 容器化的好处是更轻量,复用下层的操作系统,相当于 ...

  9. shell脚本检查是否存在tun0虚拟网卡,若不不存在服务器更改port,并重启服务器,客户端修改port,并重新启动客户端

    openvp 客户端 /home 目录下各脚本文件名 [root@jira home]# ls openvpn_server_restart.sh openvpn_tunnel_monitor.sh ...

  10. SQlL Server ----- 通过年月进行查询

    websit  中的代码. 不修改 对控件进行修改,展示年月 WdatePicker({ dateFmt: 'yyyy-MM', isShowToday: false, isShowClear: fa ...