Vue实现列表过滤与排序的两种方法

简介: Vue实现列表过滤与排序的两种方法

侦听属性实现列表过滤:

<div id="APP">
  <input type="text" v-model="keyWord">
  <ul>
    <li v-for="(item,index) of newList" :key="item.id">
      {{item.name}} - {{item.age}} - {{item.sex}}
    </li>
  </ul>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      // keyWord 用于接收用户输入的内容
      keyWord:"",
      // 原始数据列表,用于过滤,不可更改
      list:[
        {id:1, name:"马冬梅", age:30, sex:"女"},
        {id:2, name:"周冬雨", age:18, sex:"女"},
        {id:3, name:"周杰伦", age:26, sex:"男"},
        {id:4, name:"温兆伦", age:24, sex:"男"}
      ],
      // 过滤后的数据列表,用于渲染页面
      newList:[]
    }
  },
  watch:{
    // 监听 keyWord 数据变化,当用户输入时进行操作
    keyWord:{
      // 初始化时执行一下,避免页面加载时 newList 中没有数据
      immediate:true,
      handler(val){
        // 利用 filter 方法让 newList 等于过滤后的数据列表
        this.newList = this.list.filter((item) => {
          // 利用 indexOf 方法返回条件成立的数据
          return item.name.indexOf(val) !== -1;
        })
      }
    }
  }
});

:filter 方法不归 Vue 管理,所以要写成箭头函数的形式。

 

计算属性实现列表过滤【推荐】:

<div id="APP">
  <input type="text" v-model="keyWord">
  <ul>
    <li v-for="(item,index) of newList" :key="item.id">
      {{item.name}} - {{item.age}} - {{item.sex}}
    </li>
  </ul>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      // keyWord 用于接收用户输入的内容
      keyWord:"",
      // 原始数据列表,用于过滤,不可更改
      list:[
        {id:1, name:"马冬梅", age:30, sex:"女"},
        {id:2, name:"周冬雨", age:18, sex:"女"},
        {id:3, name:"周杰伦", age:26, sex:"男"},
        {id:4, name:"温兆伦", age:24, sex:"男"}
      ]
    }
  },
  computed:{
    // 计算一个新的数据列表,用于渲染页面
    newList(){
      // 返回过滤后的数据列表
      return this.list.filter((item) => {
        return item.name.indexOf(this.keyWord) !== -1;
      })
    }
  }
});

计算属性实现列表排序

<div id="APP">
  <input type="text" v-model="keyWord">
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
  <ul>
    <li v-for="(item,index) of newList" :key="item.id">
      {{item.name}} - {{item.age}} - {{item.sex}}
    </li>
  </ul>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      keyWord: "",
      // 0 表示原顺序、1 降序、2 升序
      sortType: 0,
      list:[
        {id:1, name:"马冬梅", age:30, sex:"女"},
        {id:2, name:"周冬雨", age:18, sex:"女"},
        {id:3, name:"周杰伦", age:26, sex:"男"},
        {id:4, name:"温兆伦", age:24, sex:"男"}
      ]
    }
  },
  computed:{
    newList(){
      // 因为需要排序过滤之后的数据,所以不能直接返回
      const arr = this.list.filter((item) => {
        return item.name.indexOf(this.keyWord) !== -1;
      })
      // 判断 sortType 是否不为 0,不为 0 表示需要排序
      if(this.sortType){
        arr.sort((min,max) => {
          // 1 表示降序,从大到小。2 表示升序,从小到大
          if(this.sortType === 1){
            return max.age - min.age;
          }else{
            return min.age - max.age;
          }
        })
      }
      return arr;
    }
  }
});

原创作者:吴小糖

创作时间:2023.3.14

相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
7天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
31 1
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
32 1
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1065 0
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
42 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
30 1

热门文章

最新文章