vue模糊搜索

后端返回全部的数据，前端做一个模糊搜索。

<template>
  <div class="bg">
    <div class="fixed">
      <div class="search">
        <img src="@/assets/images/search.png" />
        <input
          type="text"
          v-model="codeNum"
          placeholder-class="placeholder-input"
          placeholder="请输入债券代码"
        />
        <span class="clearBtn" v-show="showClear" @click="clearSearch()">取消</span>
      </div>
    </div>
    <!-- <div > -->
    <van-list class="article">
      <div
        class="lone-article"
        @click="toCalculate(item)"
        v-for="(item,index) of bondsList"
        :key="index"
      >
        <p>{{item.bondCode}}</p>
      </div>
    </van-list>
  </div>
</template>

js代码

 watch: {
    codeNum(val) {
      if (val.length > 0) {
        this.showClear = true;
        let result = [];
        this.bonds.map(item => {
          if (item.bondCode.indexOf(val) > -1) {
            result.push(item);
          }
        });
        this.bondsList = result;
      } else if (val.length == 0) {
        this.showClear = false;
        this.bondsList = this.bonds;    //this.bondList是后台请求的数据
      }
    }
  },