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. flask框架（三）——路由系统route转换成add_url_rule及源码分析

    这节我们不用@app.route来写路由,而是通过add_url_rule 传统写法  (<int:nid>传递int类型参数,endpoint是取别名) @app.route('/det ...

  2. mysql 字符

    只适用mysql5.0以上的版本: 1.一个汉字占多少长度与编码有关:         UTF-8:一个汉字＝3个字节            GBK:一个汉字＝2个字节 2.varchar(n)表示n ...

  3. Web SSH远程连接利器:gotty

    Web SSH远程连接利器:gotty 这个东东能让你使用浏览器连接你远程的机器! 一. 环境准备 下载https://github.com/yudai/gotty. 请先配置好 Golang 环境, ...

  4. ABP 基于DDD的.NET开发框架 学习（六）创建新动态Api

    我们想要这个服务暴露成一个Web API控制器,以方便客户端调用.ASP.NET Boilerplate能够自动且动态地为这个应用服务创建Web API 控制器,只需要一行配置代码即可完成. Dyna ...

  5. error: ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode

    @vue/cli创建项目时报错, 解决: 删除之. 查看vue/cli版本号: npm view @vue/cli versions --json

  6. js两个变量互换值

    js两个变量交换值 这个问题看似很基础,但是有很多的实现方式,你知道的有多少呢,网上也有很多的方法,下面就来总结一下 中间变量(临时变量) 临时变量其实很好理解,通过一个中间变量进行交换值 var s ...

  7. Java 之 web 相关概念

    一.软件架构 1.C/S:客户端/服务器端 2.B/S:浏览器/服务器端(目前常用) 二.网络资源 1.静态资源 静态资源:所有用户访问后,得到的结果都是一样的,称为静态资源,静态资源可以直接被浏览器 ...

  8. js 字节操作

    获取byte的高4位bit和低4位bit function getHeight4(ata){//获取高四位 int height; height = ((data & 0xf0) >&g ...

  9. Mysql8.0.17安装（windows10)

    1.因为系统重装  又双叒叕开始了装mysql数据库 下载安装包 https://dev.mysql.com/downloads/mysql/ 2.解压到你想安装的地方 3.解压完是没有图红色框中的文 ...

  10. Python学习日记(十三) 递归函数和二分查找算法

    什么是递归函数? 简单来说就是在一个函数中重复的调用自己本身的函数 递归函数在调用的时候会不断的开内存的空间直到程序结束或递归到一个次数时会报错 计算可递归次数: i = 0 def func(): ...