蓝桥杯Web练习题：【功能实现】搜一搜呀

【功能实现】搜一搜呀

背景介绍
通常网站上会有搜索功能，方便用户定位搜索。本次试题我们要使用 Vue 2 的语法来完成一个关键字匹配的搜索功能。

准备步骤
在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/exam02-imi.zip && unzip exam02-imi.zip && mv exam02-imi/* ./ && rm -rf exam02-imi*

下载完成之后的目录结构如下：

├── css
│   └── style.css
├── images
│   ├── bar.png
│   ├── birds.png
│   ├── cat.png
│   ├── dog.png
│   ├── fox.png
│   └── lion.png
├── index.html
└── vue.min.js

其中：

css/style.css 是样式文件。
images 是项目所用到的图片文件。
index.html 是实现搜索功能的页面。
vue.min.js 是 Vue 文件。
下载源码。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【Web 服务】，当前页面无法正常显示。
考试要求
请完善 index.html 文件，让页面具有如下所示的效果：

图片描述

要求规定
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
总通过次数: 798 | 总提交次数: 879 | 通过率: 90.8%

题解

考点：Vue2计算属性
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新

当搜索框中的响应式数据发生改变时，触发计算属性，重新加载filteredList中的值

//...index.html
        computed: {
          filteredList() {
            // TODO: 请补充代码
            let res = []
            this.postList.find(item => {
              if (item.title.indexOf(this.search) !== -1) {
                res.push(item)
              }
            })
            return res
          },
        },
      })