【功能实现】搜一搜呀

介绍

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

准备

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

├── 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 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="请搜索" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filteredList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      class Post {
        constructor(title, link, img) {
          this.title = title;
          this.link = link;
          this.img = img;
        }
      }

      const app = new Vue({
        el: "#app",
        data: {
          search: "",
          postList: [
            new Post(
              "小猫咪",
              "https://unsplash.com/s/photos/cat",
              "./images/cat.png"
            ),
            new Post(
              "小狗狗",
              "https://unsplash.com/@joeyc",
              "./images/dog.png"
            ),
            new Post(
              "北极熊",
              "https://unsplash.com/@hansjurgen007",
              "./images/bar.png"
            ),
            new Post(
              "狮子",
              "https://unsplash.com/@hansjurgen007",
              "./images/lion.png"
            ),
            new Post(
              "小鸟",
              "https://unsplash.com/@eugenechystiakov",
              "./images/birds.png"
            ),
            new Post(
              "狐狸",
              "https://unsplash.com/@introspectivedsgn",
              "./images/fox.png"
            ),
          ],
        },
        computed: {
          filteredList() {
          return this.postList.filter(item=> item.title.includes(this.search)
           )
          },
        },
      });
    </script>
  </body>
</html>

这段代码看起来像是 Vue.js 中的计算属性的定义。

在 Vue.js 中，计算属性是基于它们的依赖进行缓存的属性。这意味着只要依赖项没有发生变化，多次访问计算属性时会立即返回之前缓存的结果，而不需要重新计算。

现在来解释这段代码：

computed: {
    filteredList() {
        return this.postList.filter(item => item.title.includes(this.search));
    },
},

filteredList 是一个计算属性，它返回了一个经过筛选的 postList 数组。
在这里，postList 是 Vue 组件中的一个数据属性，应该是一个包含了多个对象的数组。
filteredList 使用了 JavaScript 中的 filter 方法来筛选 postList 数组中的元素。
filter 方法的参数是一个回调函数，它会对数组中的每个元素执行一次，并根据回调函数的返回值来决定是否保留该元素。在这里，回调函数通过 item.title.includes(this.search) 判断了 item 的 title 属性是否包含了 this.search（即组件中的搜索关键词）。
如果 item.title 包含了 this.search，则 filter 方法会保留该 item，否则会将其过滤掉。
最终，filteredList 返回了符合搜索条件的 postList 数组。

因此，这段代码的作用是根据组件中的搜索关键词 this.search 对 postList 数组进行筛选，并将结果作为计算属性 filteredList 返回。

文章版权声明 1、本网站名称：曙光博客
2、本站永久网址：pqblog.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ86512进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

学习经验

【悲战蓝桥杯】vue.js搜一搜

【功能实现】搜一搜呀

介绍

准备

目标

规定

请登录后发表评论