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. kubernetes 实践三：使用kubeadm安装k8s1.16.0

    环境版本说明: 三台vmware虚拟机,系统版本CentOS7.6. Kubernetes 1.16.0,当前最新版. flannel v0.11 docker 18.09 使用kubeadm可以简单 ...

  2. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  3. 3.03定义常量之enum

    [注:本程序验证是使用vs2013版] #include <stdio.h> #include <stdlib.h> #include <string.h> #pr ...

  4. ZFS文件系统及Freenas介绍

    一.简介 1.什么是zfs文件系统 ZFS文件系统的英文名称为Zettabyte File System,也叫动态文件系统(Dynamic File System),是第一个128位文件系统.最初是由 ...

  5. Replace到达地

    string getcstr(string cs)        {            String SplitKey = @"乌孜别克族,柯尔克孜族,维吾尔族, 鄂伦春族, 哈萨克族, ...

  6. requests爬虫get请求

    1.简单get请求 url = 'https://www.baidu.com' headers = { 'accept': 'text/html,application/xhtml+xml,appli ...

  7. JSP页面嵌套c:forEach

    做java web项目有时候会需要在页面使用嵌套<c:forEach>遍历一个List,但是嵌套很容易忽略一些东西导致出错 后台代码: List<Map<String, Obj ...

  8. mysql启动过程

    MYSQL启动过程经过以下顺序 1.mysql读取配置文件的顺序 读取顺序 /etc/my.cnf>/etc/mysql/my.cnf>/usr/etc/my.cnf ~/.my.cnf ...

  9. MySQL连接查询流程源码

    http://blog.itpub.net/29510932/viewspace-2129300/ 初始化: 点击(此处)折叠或打开 main |-mysqld |-my_init // 初始话线程变 ...

  10. SCADA系统构架的安全分析总结

    概念: SCADA 数据采集与监控 Supervisory Control And Data Acquisition  .包括了计算机设备  工业控制组件    网络 组成部件 ,SCADA 系统被用 ...