zoukankan      html  css  js  c++  java
  • 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>
    View Code

      效果图:

      

    总结:

      这个是比较简单的实现模糊搜索,不考虑节流等情况


     场景二:          

  • 相关阅读:
    PHP-循环结构-数组
    PHP-数据类型-运算符
    数据库-mysql语句-查-WEB服务器
    数据库-mysql语句-查
    数据库-SQL语句:删除和修改语句-列类型-列约束
    软件工程-生命周期
    网络电视精灵
    小型资源管理器
    动态生成控件 并设置只能输入数字 和小数点
    C#七大原则
  • 原文地址:https://www.cnblogs.com/TTblog5/p/12507340.html
Copyright © 2011-2022 走看看