1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>06_列表渲染_过滤与排序</title>
  6.     </head>
  7.     <body>
  8.         <!--
  9.             1.列表过滤
  10.             2.列表排序
  11.         -->
  12.  
  13.         <div id="test">
  14.             <input type="text" v-model="searchName"/>
  15.             <ul>
  16.                 <li v-for="(p,index) in filterPersons" :key="index">
  17.                     {{index}}--{{p.name}}--{{p.age}}
  18.                 </li>
  19.             </ul>
  20.  
  21.             <button @click="setOrderType(1)">年龄升序</button>
  22.             <button @click="setOrderType(2)">年龄降序</button>
  23.             <button @click="setOrderType(0)">原本顺序</button>
  24.         </div>
  25.  
  26.         <script type="text/javascript" src="../js/vue.js" ></script>
  27.         <script>
  28.             new Vue({
  29.                 el: '#test',
  30.                 data:{
  31.                     persons:[
  32.                         {name:'Tom',age:18},
  33.                         {name:'Jack',age:16},
  34.                         {name:'Bob',age:19},
  35.                         {name:'Rose',age:17}
  36.                     ],
  37.                     searchName:'',
  38.                     orderType: 0,    //0代表原本，1代表升序，2代表降序
  39.                 },
  40.                 computed:{
  41.                     filterPersons(){
  42.                         //取出相关数据
  43.                         const {searchName,persons,orderType}=this
  44.                         //最终需要显示的数组
  45.                         let fPersons;
  46.                         //对persons进行过滤
  47.                         fPersons=persons.filter(p=> p.name.indexOf(searchName)!==-1)
  48.  
  49.                         //排序
  50.                         if(orderType!==0){
  51.                             fPersons.sort(function(p1,p2){    //返回负数P1在前，返回正数P2在前
  52.                                 //1代表升序，2代表降序
  53.                                 if(orderType===2){
  54.                                     return p2.age-p1.age
  55.                                 }else{
  56.                                     return p1.age-p2.age
  57.                                 }
  58.                                 return p2.age-p1.age
  59.                             })
  60.                         }
  61.  
  62.                         return fPersons
  63.                     }
  64.                 },
  65.                 methods:{
  66.                     setOrderType(orderType){
  67.                         this.orderType=orderType
  68.                     }
  69.                 }
  70.             })
  71.         </script>
  72.     </body>
  73. </html>

VUE：列表的过滤与排序的更多相关文章

  1. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. vue列表排序实现中的this问题

    最近在看vue框架的知识,然后其中有个例子中的this的写法让我很疑惑 <!DOCTYPE html> <html> <head> <meta charset ...

  3. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  4. 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件

    分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...

  5. drf--搜索、过滤、排序组件

    目录 drf--搜索.过滤.排序组件 过滤 DjangoFilterBackend 自定义过滤器django-filter模块 自定义过滤类 搜索SearchFilter 排序OrderingFilt ...

  6. drf过滤和排序及异常处理的包装

    过滤和排序(4星) 查询所有才需要过滤(根据过滤条件),排序(按某个规律排序) 使用前提: 必须继承的顶层类是GenericAPIView 内置过滤类 内置过滤类使用,在视图类中配置,是模糊查询 使用 ...

  7. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (27) ------ 第五章 加载实体和导航属性之关联实体过滤、排序、执行聚合操作

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-9  关联实体过滤和排序 问题 你有一实体的实例,你想加载应用了过滤和排序的相关 ...

  9. MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

随机推荐

  1. C#中的IEnumerable<T>知识点

    1.扩展IEnumerable<T>的方法 使继承了IEnumeralbe<T>的接口有了MyS方法 static class MySum {                  ...

  2. nodejs-安装及卸载

    linux下安装node 1.编译的方式安装​ 1 2 3 4 5 6 7 wget http://nodejs.org/dist/node-latest.tar.gz tar zxvf node-l ...

  3. HDU 2815

    特判B不能大于等于C 高次同余方程 #include <iostream> #include <cstdio> #include <cstring> #includ ...

  4. navicate11不能激活的问题

    navicate11不能激活的问题 学习了:http://blog.csdn.net/sanbingyutuoniao123/article/details/52589678 不要安装在系统盘,如果安 ...

  5. Android自己定义RatingBar

    注意rating_background图片做出来的图片最好和图片四周有一定的空隙.不然会造成图片底部被拉伸的情况. <RatingBar android:layout_width="w ...

  6. SQL 数据库性能优化

    http://blog.csdn.net/yzllz001/article/details/54848513 1.  减少数据访问(减少磁盘访问) 2.  返回更少数据(减少网络传输或磁盘访问) 3. ...

  7. Qt-信号和槽-多对多

    前言:介绍1对多,多对1以及多对多的案例. 一.1对多 演示内容:在QLineEdit输入时,同步label,text browser以及调试输出板同步显示. 1.1 新建工程 1.2 添加部件 拖入 ...

  8. 在eclipse环境下使用maven install 命令碰到native2ascii-utf8问题解决方案

    报错语句:Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-beta-1:native2ascii (nat ...

  9. jquery中$each()

    $.each():可用于遍历任何的集合(无论是数组或对象) $(selector).each():专用于jquery对象的遍历, 如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this ...

  10. mysql学习 2

    1.建立外键 create table <表名>( <字段> 字段类型 not null, <字段> 字段类型 not null, <字段> 字段类型 ...