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. SQL Server 索引优化 ——索引缺失

    本文我们将重点给出动态视图法发现数据库中缺失的索引.对于索引的调整和新建将不在本文阐述范围,后续将陆续分享相关经验. sys.dm_db_missing_index_details 缺失索引明细,包括 ...

  2. android使用http3

    http3的github地址: https://github.com/cloudflare/quiche

  3. Java开发环境搭建（一）

    一.JDK与JRE JDK:Java Development Kit,Java开发工具包,是给开发人员使用的,其中包含了Java的开发工具,如java.javac.jar等命令,同时也包含了JRE. ...

  4. VS2017 配置 boost_1_70

    1. 下载与安装 1.1 安装方法1 (1) 下载 https://www.boost.org/ 或者使用 https://sourceforge.net/projects/boost/files/b ...

  5. sqlserver 汉字转拼音（转载）

    转载来源一:https://www.cnblogs.com/zhuisuo/archive/2012/01/11/2318908.html 汉字转全拼音函数优化方案(SQLServer),值得你看看 ...

  6. python（字符串函数）

    一.字符串函数 1.首字母大小写 capitalize() title() name = "xinfangshuo" print (name.capitalize()) print ...

  7. 基于STM8的IIC协议--实例篇--时钟模块(DS3231)读取

    1. 综述 由上篇博客可知道IIC协议如何用代码实现,本篇博客就不涉及协议内容,只讲解如何使用. 本次的实验传感为:DS3231(时钟模块),对于时钟模块的具体信息我也就不多介绍,大家可以自行度娘,具 ...

  8. 常见的监控JVM的几个Linux命令和使用

    jps [root@xxx bin]# jps -l 2007bash: jps: command not found [root@xxx bin]# /opt/jdk1.8.0_181/bin/jp ...

  9. gensim中word2vec和其他一些向量的使用

    直接上代码吧,word2vec # test from gensim.models.word2vec import Word2Vec txt_file = open('data.txt') sente ...

  10. djangCrm

    ---恢复内容开始--- 一> 在数据库进行循环取多对多 def get_classlist(self): l=[] for cls in self.class_list.all(): l.ap ...