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() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- 关联分析Apriori算法和FP-growth算法初探
1. 关联分析是什么? Apriori和FP-growth算法是一种关联算法,属于无监督算法的一种,它们可以自动从数据中挖掘出潜在的关联关系.例如经典的啤酒与尿布的故事.下面我们用一个例子来切入本文对 ...
- datable中table.row() not a funtion 解决方法
解决办法一: 改为.DataTable({ (初始化时候) 解决办法二: 或者改为var data = myTable.api().row( this ).data();(获取值的时候)
- linux下安装kubectl
查看所有版本: https://github.com/kubernetes/kubernetes/blob/master/CHANGELOG.md 下载指定版本: curl -O https://dl ...
- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server versio
Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL ...
- linux学习------磁盘性能测试
测试服务器 1核1G配置 下载后放在你想测试的目录下,执行preparefile.sh准备测试文件,完成后执行runTest.sh执行测试,等待测试结果完成. {sysbench_bin}> ...
- js ajax方法模板
ajax方法: $.ajax({ type: "POST", url: "WebService.asmx/sp_sj_yisheng_gexinhuaAdd", ...
- js中的 Date对象 在 IOS 手机中的兼容性问题
项目中有个时间相关的需求,很自然的用到了 js 中的 new Date() 获取时间,浏览器使用模拟手机模式访问没有问题,但是真机测试时发现,ios系统的手机无法显示时间. 定位问题发现是 new D ...
- stringify()和parse()的区别
记录一下小知识点,大神略过... 一:JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"name":"go ...
- mvc RedirectToAction、mobile 重定向地址栏未改变
@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { da ...
- Spring缓存注解@Cacheable
@Cacheable @Cacheable 的作用 主要针对方法配置,能够根据方法的请求参数对其结果进行缓存 @Cacheable 作用和配置方法 参数 解释 example value 缓存的名称, ...