Vue实现简单搜索功能的示例代码

目录

• 1、概述
• 2、功能逻辑
• 2.1功能流程
• 2.2 流程图
• 3、功能实现
• 3.1 vue组件化
• 3.2 代码
• 3.3 动态效果

1、概述

在vue项目中，搜索功能是我们经常需要使用的一个场景，最常用的是在列表数据中搜索一个想要的，今天的例子就是我们实现vue从列表数据中搜索，并展示。如下图所示：

2、功能逻辑

2.1功能流程

这里我们进行简单搜索功能，搜索逻辑是只要用户输入值与产品的名称进行模糊匹配，符合条件的数据进行展示，不符合条件的数据过滤。流程描述如下：

• 用户点击搜索框，输入内容；
• 检测到搜索框值变化，取用户输入值；
• 对用户输入值进行判断，若为空，则展示原列表，不为空则进行筛选；
• 将用户输入值与所有列表数据进行遍历匹配，若匹配，则展示匹配条目，完成搜索。

2.2 流程图

这张图仅代表最简单的搜索流程，若需要进行一些复杂的处理，可以进行修改，比如说匹配的商品名称关键字变色等。

3、功能实现

3.1 vue组件化

实现如上图功能，我们肯定是使用vue的组件特性，将搜索以及，产品列表抽成组件，以提高代码复用性，抽成组件之后，该页面将由三个部分组成，数据在以下三个组件之间传递：

• 父组件：主页面，用于数据逻辑处理；
• 搜索组件：给父组件传递用户输入值；
• 列表：展示从父组件接收的值。

3.2 代码

父组件：index.vue

主要的逻辑处理是 searchInputChange，对于更复杂的搜索逻辑，也可以在里面进行处理。

搜索组件：searchInput.vue

列表组件：productList.vue

标题头组件：titleBar

以上代码为部分代码，css代码不包含在内。

3.3 动态效果

以上代码实现的效果如下动态图：

到此这篇关于Vue实现简单搜索功能的示例代码的文章就介绍到这了,更多相关Vue搜索功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！