Vue：数组的过滤排序显示客户端实现

搜索列表

• {{index+1}})姓名：{{person.name}} —— 性别：{{person.sex}} —— 年龄：{{person.age}} —— 电话：{{person.phone}}

  运行结果：

  

  过滤

  =============================================================

  思路：输入关键字后，通过计算属性得到新的数组进行展示。新的数组初始情况下是等于所有人数组的，输入姓名后，会进行过滤，然后进行展示。

  关键代码

  computed: {

  filterPersons() {

  // 获取数据

  let {searchName, persons} = this;

  // 取出数组中的数据

  let arr = […persons];

  // 过滤数组

  if (searchName.trim()) {

  arr = persons.filter(p => p.name.indexOf(searchName) !== -1);

  }

  return arr;

  }

  }

  完整代码

  搜索列表

• {{ index + 1 }})姓名：{{ person.name }} —— 性别：{{ person.sex }} —— 年龄：{{ person.age }} —— 电话：{{ person.phone }}

  排序

  =============================================================

  思路：使用一个参数记录排序方式，根据排序方式对显示的人员数组进行排序。

  关键代码

  computed: {

  filterPersons() {

  // 获取数据

  let {searchName, persons, orderType} = this;

  // 取出数组中的数据

  let arr = […persons];

  // 过滤数组

  if (searchName.trim()) {

  arr = persons.filter(p => p.name.indexOf(searchName) !== -1);

  }

  // 排序

  if (orderType) {

  arr.sort((p1, p2) => {

  if (orderType === 1) {// 降序

  return p2.age-p1.age;

  } else if (orderType === 2) {// 升序

  return p1.age-p2.age;

  } else {

  框架相关

  原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

  在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  Vue框架

  知识要点：
  1. vue-cli工程
  2. vue核心知识点
  3. vue-router
  4. vuex
  5. http请求
  6. UI样式
  7. 常用功能
  8. MVVM设计模式

  

  React框架

  知识要点：
  1. 基本知识
  2. React 组件
  3. React Redux
  4. React 路由

  

  学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

  Vue框架

  知识要点：
  1. vue-cli工程
  2. vue核心知识点
  3. vue-router
  4. vuex
  5. http请求
  6. UI样式
  7. 常用功能
  8. MVVM设计模式

  [外链图片转存中…(img-YFFAzArC-1714387288379)]

  React框架

  知识要点：
  1. 基本知识
  2. React 组件
  3. React Redux
  4. React 路由

  [外链图片转存中…(img-hFq1DrCy-1714387288380)]