<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>06_列表渲染_过滤与排序</title>

    </head>

    <body>

        <!--

            1.列表过滤

            2.列表排序

        -->

        <div id="test">

            <input type="text" v-model="searchName"/>

            <ul>

                <li v-for="(p,index) in filterPersons" :key="index">

                    {{index}}--{{p.name}}--{{p.age}}

                </li>

            </ul>

            <button @click="setOrderType(1)">年龄升序</button>

            <button @click="setOrderType(2)">年龄降序</button>

            <button @click="setOrderType(0)">原本顺序</button>

        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>

        <script>

            new Vue({

                el: '#test',

                data:{

                    persons:[

                        {name:'Tom',age:18},

                        {name:'Jack',age:16},

                        {name:'Bob',age:19},

                        {name:'Rose',age:17}

                    ],

                    searchName:'',

                    orderType: 0,    //0代表原本，1代表升序，2代表降序

                },

                computed:{

                    filterPersons(){

                        //取出相关数据

                        const {searchName,persons,orderType}=this

                        //最终需要显示的数组

                        let fPersons;

                        //对persons进行过滤

                        fPersons=persons.filter(p=> p.name.indexOf(searchName)!==-1)

                        //排序

                        if(orderType!==0){

                            fPersons.sort(function(p1,p2){    //返回负数P1在前，返回正数P2在前

                                //1代表升序，2代表降序

                                if(orderType===2){

                                    return p2.age-p1.age

                                }else{

                                    return p1.age-p2.age

                                }

                                return p2.age-p1.age

                            })

                        }

                        return fPersons

                    }

                },

                methods:{

                    setOrderType(orderType){

                        this.orderType=orderType

                    }

                }

            })

        </script>

    </body>

</html>

VUE：列表的过滤与排序的更多相关文章

  1. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. vue列表排序实现中的this问题

    最近在看vue框架的知识,然后其中有个例子中的this的写法让我很疑惑 <!DOCTYPE html> <html> <head> <meta charset ...

  3. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  4. 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件

    分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...

  5. drf--搜索、过滤、排序组件

    目录 drf--搜索.过滤.排序组件 过滤 DjangoFilterBackend 自定义过滤器django-filter模块 自定义过滤类 搜索SearchFilter 排序OrderingFilt ...

  6. drf过滤和排序及异常处理的包装

    过滤和排序(4星) 查询所有才需要过滤(根据过滤条件),排序(按某个规律排序) 使用前提: 必须继承的顶层类是GenericAPIView 内置过滤类 内置过滤类使用,在视图类中配置,是模糊查询 使用 ...

  7. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (27) ------ 第五章 加载实体和导航属性之关联实体过滤、排序、执行聚合操作

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-9  关联实体过滤和排序 问题 你有一实体的实例,你想加载应用了过滤和排序的相关 ...

  9. MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

随机推荐

  1. Python 从入门到实践 - Web应用程序

    一.创建项目 1.建立虚拟环境 python -m venv ll_env # 出现ll_env文件夹 2.激活虚拟环境 source ll_env/bin/activate # 要停止使用虚拟环境, ...

  2. InfoSYS-20170114

    1.描述Spring的事务机制 2.描述并发脏数据,如何避免 3.如何防止同一个请求重复提交(重复付款) 4.如何监控程序性能 5.CPU过高说明什么问题 通常是程序中有死循环, 参考 http:// ...

  3. java的值传递与引用传递

    一. 经常搞不清楚,当一个对象做为参数传入到方法中时,为啥有时候值能被改变,有时候又不会改变,以下说明原因: 1.当传入的参数,在方法中能被改变的为 引用传递 2.当传入的参数,在方法中没被改变的为 ...

  4. 【codeforces 807A】Is it rated?

    [题目链接]:http://codeforces.com/contest/807/problem/A [题意] 给你n个人在一场CF前后的rating值; 问你这场比赛是不是计分的 [题解] 如果有一 ...

  5. hibernate框架总结

    实体类编写规则1 实体类里面属性私有的 2 私有属性使用公开的set和get方法操作 3 要求实体类有属性作为唯一值(一般使用id值) 4 实体类属性建议不使用基本数据类型,使用基本数据类型对应的包装 ...

  6. html 页面刷新

    JS 脚本 方法1 setInterval 函数 定时局部刷新用到jQuery里面的setInterval方法, 该函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新. setIn ...

  7. [Angular] Getting to Know the @Attribute Decorator in Angular

    So when you using input binding in Angular, it will always check for update. If you want to improve ...

  8. FZU Problem 1853 Number Deletion

    Problem 1853 Number Deletion Accept: 80    Submit: 239 Time Limit: 1000 mSec    Memory Limit : 32768 ...

  9. 【C/C++学院】0724-堆栈简单介绍/静态区/内存完毕篇/多线程

    [送给在路上的程序猿] 对于一个开发人员而言,可以胜任系统中随意一个模块的开发是其核心价值的体现. 对于一个架构师而言,掌握各种语言的优势并能够运用到系统中.由此简化系统的开发.是其架构生涯的第一步. ...

  10. Android实现能够揉动的图片

    public class Demo01 extends Activity{ private Bitmap bitmap = null; @Override protected void onCreat ...