【功能实现】搜一搜呀

介绍

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

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
├── css
│   └── style.css
├── images
├── 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 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

总通过次数: 3038 | 总提交次数: 3239 | 通过率: 93.8%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, Vue.js

题解

1
2
3
4
5
6
7
8
9
10
11
computed: {
          filteredList() {
            // TODO: 请补充代码
            console.log(this.postList);
            if (this.search.trim() === '') {
              return this.postList
            } else {
              return this.postList.filter(item => item.title.includes(this.search))
            }
          },
        },