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. Github-Q&A 常见错误排查（持续更新）

    Q1:提交Git时出现"remote origin already exists"提示?   关联本地与网上仓库的时候,可能会出现此错误,这是因为已经存在已关联的仓库.通过如下方法 ...

  2. CF936C Lock Puzzle 构造

    传送门 好久不做构造题脑子都僵化了qwq 无解的条件是\(s\)包含的字符可重集和\(t\)包含的字符可重集不相等,相等的时候下文会给出一种一定可行的构造方案. 考虑增量构造.定义某个字符串\(x\) ...

  3. lombok使用教程

    Lombok介绍.使用方法和总结https://www.cnblogs.com/heyonggang/p/8638374.html Lombok简介.使用.工作原理.优缺点https://www.ji ...

  4. (七) Docker 部署 MySql8.0 一主一从 高可用集群

    参考并感谢 官方文档 https://hub.docker.com/_/mysql y0ngb1n https://www.jianshu.com/p/0439206e1f28 vito0319 ht ...

  5. PreparedStatement和批处理

    1.概述 PreparedStatement 接口继承了 Statement,并与之在两方面有所不同,它表示预编译的 SQL 语句对象. 首先,数据库会对预编译语句提供性能优化.因为预编译语句有可能被 ...

  6. 浮动和渐变色，定位position，元素的层叠顺序

    浮动: float 是我们网页布局的一种 浮动 可以有 left 左浮动 right 右浮动 两种 浮动的特点: 脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽 ...

  7. 微信小程序组件通信入门及组件生命周期函数

    组件生命周期函数链接地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.h ...

  8. day31-python之内置函数

    1.udp多线程 import socketserver class MyServer(socketserver.BaseRequestHandler): def handle(self): prin ...

  9. mac安装openjdk8-maven-mysql-git-docker

    1. openjdk8安装命令查看地址:https://github.com/AdoptOpenJDK/homebrew-openjdk#other-versions   感觉上面命令地址不靠谱,还是 ...

  10. c# 计算目录的大小