使用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. .NET框架 - NETFramework + API + EF（DBFirst） + MYSQL

    .NET框架 - NETFramework + MVC+ EF(DBFirst) + MYSQL 1. 安装3个MYSQL插件 ①mysql-for-visualstudio-1.2.8    vs的 ...

  2. 使用Vim-plug作为Vim 插件管理器

    ref: https://www.cnblogs.com/jiftle/p/6918157.html - vundle是一款老款的插件管理工具- vim-plug相对较新,特点是支持异步加载,相比vu ...

  3. Java虚拟机—垃圾回收算法（整理版）

    1.概述 由于垃圾收集算法的实现涉及大量的程序细节.因此本节不打算过多地讨论算法的实现,只是介绍几种算法的思想及其发展过程.主要涉及的算法有标记-清除算法.复制算法.标记-整理算法.分代收集算法. 2 ...

  4. Ext.net MessageBox提示

    Ext.MessageBox.confirm("选择全部", "确定选择?", function (btn) { if (btn !== "yes&q ...

  5. DIV内文字两端对齐

    div{ text-align: justify; text-justify:inter-ideograph; }

  6. Centos7.2下部署Java开发环境

    1.安装JDK 如果以前安装过JDK,想要重新安装可执行如下命令进行卸载,这里安装的是JDK1.8: 先查询: rpm -qa|grep jdk 然后再通过下面命令进行卸载 rpm -e --node ...

  7. IDEA配置github并上传项目

    https://www.cnblogs.com/jinjiyese153/p/6796668.html

  8. idea2018注册

    1.在网上随便找一个注册码,lanyu的即可,注册时会被提示此注册码已被取消. 2.修改hosts文件,目录:C:\Windows\System32\drivers\etc\hosts,在文件中添加  ...

  9. class和style属性

    值类型: 1.表达式计算出的字符串结果或者字符串. 2.对象(表达式或者对象名,建议采用对象名) key为className,值的真假控制这个name的有无. //class <div v-bi ...

  10. 使用Perfect Player观看电视直播

    Perfect Player下载地址: 官网 http://niklabs.com/ 去广告版本:链接: https://pan.baidu.com/s/1gevIdBghB6lB46vVyfQUWg ...