vue实现模糊搜索

vue实现模糊搜索

一、数组实现模糊搜索

CDN引入vue：

<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>

Html代码：

 <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>
    </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.text) != -1 || item.age.indexOf(this.text) != -1   );          
             } else {            
                 return this.info;          
             }        
            }      
         }    
}