zoukankan      html  css  js  c++  java
  • 汽车系统实现--搜索功能

    <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;
                }
              })
    
            }
  • 相关阅读:
    【spring-boot】spring-boot 事物管理——之注解@Transactional
    【spring-boot】Spring-boot学习-helloWorld
    【Maven】failOnMissingWebXml
    【java基础领域】高内聚、低耦合理解
    Pascal's Triangle
    Remove Nth Node From End of List
    Valid Palindrome
    Longest Common Prefix
    Roman to Integer
    Palindrome Number
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/10872894.html
Copyright © 2011-2022 走看看