vue分类筛选方法，filer
使用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的更多相关文章
- Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）
导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
- PHP无限极分类生成树方法，无限分级
你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. function g ...
- PHP无限极分类生成树方法
你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,整理分享了. function genera ...
- 分享一个牛逼的PHP无限极分类生成树方法，巧用引用(转)
你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. function g ...
- （转）smarty实现多级分类的方法
--http://www.aspku.com/kaifa/php/44679.html 这篇文章主要介绍了smarty实现多级分类的方法,涉及循环读取的技巧,非常具有实用价值,需要的朋友可以参考下 ...
- destoon实现调用当前栏目分类及子分类和三级分类的方法
调用当前栏目分类及子分类和三级分类是程序设计里常用的方法,本文就来详细讲述destoon实现调用当前栏目分类及子分类和三级分类的方法.具体操作如下: 在destoon中提供了如下的调用语句: 一级分类 ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- jq筛选方法
jq筛选方法(参照手册) 过滤: 1) eq(index|-index):获取第N个元素 负值表示从末尾开始匹配 <!-- 获取匹配的第二个元素 --> <p> This is ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- 常用Hadoop命令(bin)
**** bin 是二进制文件的意思,sbin....据说是superbin(管理员的bin) HDFS命令 某个文件的blocks信息 hadoop fsck /user/xx -files -bl ...
- HTTP协议7之Cookie--转
Cookie是HTTP协议中非常重要的东西, 之前拜读了Fish Li 写的[细说Cookie], 让我学到了很多东西.Fish的这篇文章写得太经典了. 所以我这篇文章就没有太多内容了. 最近我打算写 ...
- Arrays和String单元测试 20175301
要求 在IDEA中以TDD的方式对String类和Arrays类进行学习 一.String类相关方法的单元测试 1.ChatAt的测试 代码: import org.junit.Test; impor ...
- [译]Ocelot - Caching
原文 Ocelot支持基本的缓存,目前Ocelot的缓存是通过CacheManager project实现的. 下面的示例展示了如何启用缓存: s.AddOcelot() .AddCacheManag ...
- IDEA （mac版）
mac键:option=alt command=ctrl idea快捷键 command+Enter(get,set界面) command+alt+L (格式化代码) ctrl+shift+space ...
- luogu P5319 [BJOI2019]奥术神杖
传送门 要求的东西带个根号,这玩意叫几何平均数,说到平均数,我们就能想到算术平均数(就是一般意义下的平均数),而这个东西是一堆数之积开根号,所以如果每个数取对数,那么乘法会变成加法,开根号变成除法,所 ...
- CentOS7 安装Python
CentOS7 安装Python 1. 前置条件 centos7 安装时 勾选Development Tools,如果你centos7没有选,需要更多必要库 必要库 # yum -y install ...
- HttpUtility.UrlEncode()关于空格的编码问题
因为 HttpUtility.UrlEncode 在 Encode 的时候, 将空格转换成加号"+", 在 Decode 的时候将"+"号转为空格, 但是浏览器 ...
- Collection和Map类图预览与比较
类图 HashSet和TreeSet的区别:https://www.cnblogs.com/bobi1234/p/10759769.html HashSet和LinkedHashSet区别:https ...
- java程序设计习题总结
---恢复内容开始--- main()方法的参数名可以改变:main()方法的参数个数不可以改变. 当一个程序没有main()方法是,是可以编译通过的,但是不能给运行,因为找不到一个主函数入口. 标识 ...