1.test010.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.列表过滤
2.列表排序
-->
<div id="test">
    <input type="text" v-model="searchName">
    <ul>
        <!--filterPersons应该为persons过滤后产生的结果-->
        <li v-for="(p,index) in filterPersons" :key="index">
            {{index}}--{{p.name}}---{{p.age}}
        </li>
    </ul>

    <!--需要怎样排序,需要给orderType设置值-->
    <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 type="text/javascript">
    new Vue({
        el:'#test',
        data:{
            searchName:'',
            orderType:0,//自己设计:0代表原本顺序,1代表升序排序,2代表降序排序
            //数组
            persons:[
                {name:'赵云',age:'18'},
                {name:'张飞',age:'16'},
                {name:'关羽',age:'21'},
                {name:'刘备',age:'2'}
            ],
        },
        computed:{
            //搜索过滤
            filterPersons(){
                //取出相关数据,并进行结构赋值
                const {searchName,persons,orderType}=this
                //定义最终返回数组(最终需要显示的数组)
                let fPersons;

                //对persons进行过滤
                //需要看p.name中是否包含searchName,调用这个方法p.name.indexOf(searchName):indexOf为看字符串searchName在当前字符串p.name的下标
                //一旦不等于-1,说明包含了
                fPersons=persons.filter(p=>p.name.indexOf(searchName)!==-1);
                //排序
                if(orderType!==0){
                    //排序调用sort()方法,还需要传比较函数
                    fPersons.sort(function(p1,p2){//如果返回的是负数,p1在前;返回正数p2在前
                        //1代表升序排序,2代表降序排序
                        if(orderType===2){
                            return p2.age-p1.age;
                        }else{
                            return p1.age-p2.age;
                        }
                    })
                }
                return fPersons;
            }
        },

        methods:{
            setOrderType(orderType){
                this.orderType=orderType
            }
        }
    })
</script>
</body>
</html>

(尚010)Vue列表的搜素和排序的更多相关文章

  1. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

  2. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  3. HDU 1226 超级密码 （搜素）

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1226 题意简单,本来是一道很简单的搜素题目. 但是有两个bug: 1.M个整数可能有重复的. 2.N可 ...

  4. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  5. 开源搜素引擎：Lucene、Solr、Elasticsearch、Sphinx优劣势比较

    https://blog.csdn.net/belalds/article/details/82667692 开源搜索引擎分类 1.Lucene系搜索引擎,java开发,包括: Lucene Solr ...

  6. vue列表数据倒计时存在的一些坑

    vue 列表数据倒计时,在页面销毁前需要清除定时器,否着会报错. export default { data() { return { list: [] } }, mounted() { for (l ...

  7. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  8. vue 获得当前无素并做相应处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

    在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...

随机推荐

  1. DFS解决八皇后问题

    2019-07-29 16:49:15 #include <bits/stdc++.h> using namespace std; ][]; int tot; int check(int ...

  2. 2.9_Database Interface ADO结构组成及连接方式实例

    说通俗点OLE DB和ODBC都是最底层的东西,而ADO对象给我们提供了一个“可视化”和应用层直接交互的组件,ADO对象T通过OLE DB间接取得数据库中的数据,如下图: 从上面看出,可以说ADO是应 ...

  3. Javascript实现的智能消防栓状态监测画面

    系统需要添加智能消防栓模块.集成了一家采用NbIOT通讯的智能消防栓产品.由第厂家平台对接NbIot特联网平台,我们平台提供一个api从第三方平台接收消防栓状态,用SignlaR把状态推送到前端.需要 ...

  4. 逆波兰表达式求值 java实现代码

    根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话说 ...

  5. PLSQL登录失败出现空白错误提示框的问题

    安装win7后其他软件运行正常,可是数据库用cmd plsplus和plsql软件都连不上,plsql报一个空白提示框 重装n遍oracle客户端,都不行. 最后发现解决方式很简单,在plsql的图标 ...

  6. 子进程的LD_PRELOAD

    一个指定LD_PRELOAD的进程创建的子进程是否受LD_PRELOAD的影响? 1. fork()后在子进程中执行函数. main.c #include <unistd.h> #incl ...

  7. 【转载】Asp.net网站安全：去除网站根目录下的备份文件防止代码泄露

    很多网站运维人员在更新网站版本的时候,喜欢直接在网站目录文件夹中直接压缩原来的网站文件,如果这个备份压缩文件没有移动出去,这样是非常不安全的,有些网站攻击者可能会尝试访问你网站下有没有对应名字的压缩备 ...

  8. self attention pytorch代码

    实现细节; 1.embedding 层 2.positional encoding层:添加位置信息 3,MultiHeadAttention层:encoder的self attention 4,sub ...

  9. 社交类app开发（ 仿陌陌 客户端+服务器端）

    一.开发所需要的技术 手机端需要Android/iOS开发人员,服务器端需要php/数据库开发人员, 如果再做网页版的话,WEB开发也是要的. 即时通讯 GPS地图 群聊 差不多 对 http  so ...

  10. gitlab及jenkins

    1.安装配置gitlab服务,在gitlab新建一个仓库,配置本地密钥,并通过ssh方式拉取gitlab仓库代码 https://packages.gitlab.com/gitlab/gitlab-c ...