汽车系统实现--搜索功能

佚名 7年前 (2019-05-15) 随笔 620人围观抢沙发百度已收录

<div id="app">
  <div class="panel panel-primary">
      <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
      </div>
      <div class="panel panel-body form-inline">
        <label>
            Id:<input type="text" class="form-control" v-model="id">
        </label>

        <label>
                name:<input type="text" class="form-control" v-model="name">
        </label>

              <input type="button" value="添加" class="btn btn-primary" @click="add"> 

              <label>
                搜索名称的关键字 :<input type="text" class="form-control" v-model="keywords">
             </label>
      </div>
  </div>


<table class="table table-striped">
    <thead>
      <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
      </tr>
    </thead>

    <tbody>
    <tr v-for="item in search(keywords)" :key="item.id">
       <td>{{ item.id }}</td>
       <td>{{ item.name }}</td>
       <td>{{ item.ctime }}</td>
       <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
    </tr>
    </tbody>
</table>
</div>

 search(keywords){ //根据关键字进行搜索
        // ----第一种方法哦
        // var newList=[];
        // this.list.forEach(item => {
        //     if(item.name.indexOf(keywords)!=-1){
        //         newList.push(item);
        //     }
        // });
        // console.log(newList);
        // return newList;

           // 第二种方式
           return this.list.filter(item=>{
            if(item.name.includes(keywords)){
                return item;
            }
          })

        }