vue 实现前端模糊搜索

数组对象的模糊查询

在vue中，前端模糊搜索主要是用computed属性实现，具体代码如下：

• 使用fitler 过滤器 和indexOf 方法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；

• vue + bootstrap 实现前端模糊搜索
  注： 先引入 vue 文件 和 bootstrap 文件

  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  body里面的代码：

     <div class="container">
       <div class="row">
       <div class="col-lg-6" style="margin:20px">
           <div class="input-group">
           <span class="input-group-btn">
               <button class="btn btn-default" type="button">搜索</button>
           </span>
           <input type="text" v-model="text" class="form-control" placeholder="Search for...">
           </div>
       </div>
  
       <table class="table table-hover">
           <thead>
               <tr>
                   <th>序号</th>
                   <th>姓名</th>
                   <th>性别</th>
                   <th>爱好</th>
                   <th>年龄</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for="(item,i) in searchResult" :key="i">
                   <td>{{i+1}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.sex}}</td>
                   <td>{{item.hobby}}</td>
                   <td>{{item.age}}</td>
               </tr>
           </tbody>
       </table>
   </div>
  

js代码：

          var vm = new Vue({
              el:'.container',
              data:{
                text:'',
                info: [{
                  name: '雷森',
                  sex: '男',
                 hobby: '打篮球',
                  age: '18'
                },{
                  name: '刘伟',
                  sex: '男',
                 hobby: '旅游',
                  age: '24'
                },{
                  name: '刘微',
                  sex: '女',
                 hobby: '旅游',
                  age: '24'
                }, {
                 name: '胡汉三',
                  sex: '男',
                 hobby: '美食',
                  age: '30'
                }, {
                 name: '张艺',
                  sex: '女',
                 hobby: '看韩剧',
                  age: '24'
                }, {
                  name: '欧阳',
                  sex: '女',
                 hobby: '环游世界',
                  age: '25'
                }]
              },
              computed:{
                searchResult() {
                        if (this.text) {
                        // console.log(this.info)
                        return this.info.filter(
                            item =>
                            item.name.indexOf(this.text) > -1 ||
                            item.hobby.indexOf(this.ipt) > -1
                        );
                        } else {
                        return this.info;
                        }
                    }
                }
          })  

数组的模糊查询

定义一个新的空数组，对原数组遍历，用indexOf判断，不等一 -1，就push到新数组里，最后teturn 新数组

<div class="container">
        <div class="row">           
            <div class="col-lg-6" style="margin:20px">
                <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">搜索</button>
                </span>
                <input type="text" v-model="text" class="form-control" placeholder="Search for...">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <ul class="list-group">
                    <li class="list-group-item"  v-for="item in searchResult" >{{item}}</li>                           
                </ul>
            </div>             
        </div> 
    </div>
    


  <script>
          var vm = new Vue({
              el:'.container',
              data:{
                text:'',
                info: ['苹果','香蕉','平安果','猕猴桃','桃子']
              },
              computed:{
                searchResult() {
                  var list = [];
                  var _this = this;
                   this.info.map(function(item){
                      if(item.indexOf(_this.text) > -1){
                          return list.push(item)
                      }
                   }) 
                   return list    
                }
              }
          })  

  </script>