<!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. YII实现dropDownList 联动事件

    因功能需求,需要用到联动,特此记录分享 一.视图中 <div class="main-form"> <?php $form = ActiveForm::begin ...

  2. 20190226-SecureCRT连接linux显示中文乱码

    SecureCRT连接我的Ubuntu14时中文显示乱码 解决办法: 在session options里选择UTF-8

  3. 深入理解B/S与C/S架构

    首先来介绍一下B/S与C/S架构 C/S架构简要介绍 在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构: C/S架构是第一种比较早的软件架构,主要用于局域网内.也叫 客户机/服务器模式. ...

  4. C#基础--索引器

    classProgram { staticvoidMain(string[] args) { man mm =new man(); mm[0]="jingya"; mm[1]=&q ...

  5. HDU 1042 N!【大数】

    N! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total Subm ...

  6. js代码从页面移植到文件里失效或js代码改动后不起作用的解决的方法

    近期在做关于站点的项目,总是发生这种问题 写的javascript代码在页面上没有问题,可是将js代码移植到.js的文件里,在页面上进行调用,总是出现失效等错误 另外改动后的js代码,又一次刷新网页仍 ...

  7. Cocos2dx之使用UI库结合cocostudio

    使用cocostudio的UI编辑器编辑好UI界面,导出UI文件,直接在cocos2dx中使用.通过tag或者name来获取到UI控件 1.编辑ui界面,直接用模板然后拖几个控件过去 2.cocos2 ...

  8. HTML5 格式化方式以及应用

    <b>加粗字体 <big>定义大号字体 <em>定义着重文字 <i>定义斜体字 <small>定义小号字体 <strong>定义 ...

  9. java里面包的重要性-管理类文件

    包的必要性 包是用来给java源文件分门别类的,java中一个包在windows下就是一个文件夹.包的全限定名是从根文件夹開始的(\src文件夹)以点号作为分隔符,包名和包名之间使用点号隔开,java ...

  10. 如何让MP4 video视频背景色变成透明？

    本文转自:https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/ 亲测,pc端有效,但移动端微信内 ...