前言
今天碰到了需要用 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>
- View Code
效果图:
总结:
这个是比较简单的实现模糊搜索, 不考虑节流等情况
场景二:
来源: http://www.bubuko.com/infodetail-3465060.html