vue2.0_在vue中实现input输入框的模糊查询

前言

  我们要实现的一个效果是，当输入框输入值时，显示数据列表框并将检索到的数据在列表框当中做展示。

模糊查询功能原理分析

  其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询，也就是说用户可以在边输入的同时看到查询到的结果，百度的搜索功能就是很好的模糊查询的例子；其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况，然后每次用户只要在输入框中输入了内容就会触发事件并进行查询然后实时展示。

HTML部分

<input type="text" placeholder="请输入内容" v-on:input="searchCode" v-model="fundCode"/>

<!--模糊匹配数据列表-->
        <ul :style="{display:showType}">
            <li v-for="(item,index) in matchingList" :key="index">
                <span> {
   {
   item.code}}</span