vue搜索功能实现（vue+element）

template的代码：

//搜索框

  <el-input placeholder="请输入..." v-model="keyword" ></el-input>

  <button @click="search">搜索</button>

//内容
<div v-for=(item,index) in list :key=index>{{item.title}}</div>
<div v-if="isShowTip">没有搜索到匹配结果</div>

data初始化：

  data() {
    return {
      keyword: "",
      list: [],
      searchList: [],
      isShowTip: false,
    };
  },

methods:

  search() {
      this.isShowTip = false;
      if (this.keyword == "") {
        this.$toast("请输入相关内容搜索");
        return;
      }
      this.$axios.get( "../../json/getAll.json")
        .then((res) => {

         this.list= res.data.data;
        })
        .then(() => {
          this.searchList = [];
          this.list.forEach((item) => {
            if (item.title.indexOf(this.keyword) > -1) {
              this.searchList.push(item);
            }
          });
          if (this.searchList.length == 0) {
            this.isShowTip = true;
          }
          this.searchList.map((item) => {
            item.title= this.brightKeyword(item.title);
          });
        });
    },
    brightKeyword(val) {
      let keyword = this.keyword;
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `${keyword}`);
      } else {
        return val;
      }
    },