vue實現模糊查詢

前言

　　今天碰到了需要用vue實現模糊查詢，故總結利於日后查(偷)詢(懶)

分析

• 模糊匹配可以由前端或者后端完成，所以當組長要求你完成模糊匹配的時候，要分析情況：
  • 前端實現模糊查詢：當后端把數據一次性把數據返回的時候。這個也和分頁情況一樣，如果一次性把數據都給前端了，前端也可以做分頁。
  • 后端實現模糊查詢：當后端是分頁的情況，不能把數據一次性返回。比如有100條數據，分頁10頁，頁面只顯示10條數據，只能針對這10條。

場景一：

　　當已經知道了全部數據的時候：

<template>
  <div id="app">
    <input type="text" v-model="input" />
    <ul>
      <li
        class="search-item border-bottom"
        v-for="item of search"
        :key="item.name"
      >{{item.name}}</li>
    </ul>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      items: [
        { name: "路飛" },
        { name: "索隆" },
        { name: "娜美" },
        { name: "山治" }
      ],
      input: ""
    };
  },
  computed: {
    search() {
      if (!this.input) {
        return this.items;
      }
      return this.items.filter(v => {
        return v.name.includes(this.input);
      });
    }
  }
};
</script>

  效果圖：

　　

總結：

　　這個是比較簡單的實現模糊搜索，不考慮節流等情況

---

 

　場景二：