<!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. 移植Mplayer到OK6410开发板

    移植Mplayer到OK6410开发板 作者:vasage 项目需要,需要将Mplayer移植到开发板上,所以今天花了一下下午成功移植,其中参考很多文档,后发现许多文档陈旧,些许文档有少量错误,所以这 ...

  2. 参数化取值策略Random

    1.Random+Each iteration,跟顺序读取的结果唯一不同的就是这里是随机读取,取值是每次迭代取值   2.Random+Each occurrence,随机取值更新方式     3.R ...

  3. C#中的IEnumerable<T>知识点

    1.扩展IEnumerable<T>的方法 使继承了IEnumeralbe<T>的接口有了MyS方法 static class MySum {                  ...

  4. HDU 5171

    这道题本来很水,以前做过一样的,斐波那契数列,用矩阵快速幂的方法求,本来很水,以前做过很多次,为毛做的时候没想到T_T #include <iostream> #include <c ...

  5. 关于Win 10的隐私保护政策

    近日.有人责备Win10收集用户信息,事实上这样的指责并不公平,比方:"Privacy Groups Claim Microsoft Uses Windows 10 as Big Broth ...

  6. bzoj1588: [HNOI2002]营业额统计(splay)

    1588: [HNOI2002]营业额统计 题目:传送门 题解: 复习splay所以来刷个水... 题目描述不是特别清楚:应该是找第i天以前一个最小的营业额和第i天做差的最小值作为第i天的最小波动值 ...

  7. oracle 实时查询最耗CPU资源的SQL语句

    1. 先通过top命令查看产用资源较多的spid号 2.查询当前耗时的会话ID,用户名,sqlID等: select sid,serial#,machine,username,program,sql_ ...

  8. [IOI 1998] Polygon

    [题目链接] http://poj.org/problem?id=1179 [算法] 区间DP [代码] #include <algorithm> #include <bitset& ...

  9. docker compose线下安装

    Compose 是一个用户定义和运行多个容器的 Docker 应用程序.在 Compose 中你可以使用 YAML 文件来配置你的应用服务.然后,只需要一个简单的命令,就可以创建并启动你配置的所有服务 ...

  10. 几种AutoLayout自动布局所经常使用的布局约束类型

    width表示约束ui控件的固定宽度 height表示约束ui控件的固定高度 Leading Space to Superview 与父视图的左边界线保持固定距离 Trailing Space to ...