vue项目笔记（18）-搜索组件逻辑处理及代码优化

超、凢脫俗 2021-09-16 03:06 337阅读 0赞

# 搜索组件逻辑处理及代码优化 #

在我遇到的项目中，对于对于搜索组件，部分是后台直接写好的接口，直接调用既可以完成搜索；另一种就是由前端完成搜索逻辑处理，如下：

1、首先，对输入框进行双向绑定（v-model=‘keyword’）；

代码如下：

<template>
      <div>
        <div class="search">
          <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
        </div>
        <div class="search-content" ref="search" v-show="keyword">
          <ul>
            <li class="search-item border-bottom" v-for="item of list" :key="item.id">
              {
       {item.name}}
            </li>
            <li class="search-item border-bottom" v-show="hasNoData">
              没有招到匹配数据
            </li>
          </ul>
        </div>
      </div>
    </template>

2、搜索的数据来源是有父组件City请求的数据cities，所以要从父组件传值过来。

3、定义给新数组list

4、监听函数（watch），监听keyword的变化

5、优化：为了减少函数执行的频率，使用延时计时器进行优化。

6、在搜索到的数据足够多的时候，我们可以使用better-scroll实现滚动效果。当搜索不到结果的时候，我们使用v-show控制显示效果。另外，删除搜索字符时，我们通过把list置空，来取消之前搜索的结果。

7、注意：我们尽量在html中不要使用逻辑代码，可以利用computed计算属性来代替。

代码如下：