vue 实现前端模糊搜索

数组对象的模糊查询

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

• 使用fitler 过滤器 和indexOf 方法

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

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

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

  
  
  body里面的代码：

     
  
       
  
       
  
           
  
           
               搜索
           
           
           
       
  
       
  
           
  
               
  
                   
  序号
                   
  姓名
                   
  性别
                   
  爱好
                   
  年龄
               
           
           
  
               
  
                   
  {{i+1}}
                   
  {{item.name}}
                   
  {{item.sex}}
                   
  {{item.hobby}}
                   
  {{item.age}}
               
           
       
   
  

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 新数组

        
           
            

                

                
                    搜索
                
                
                
            
        
        

            

                

                    
{{item}}