搜索

摘要

flex弹性布局

 <form class="search_form">
        <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input" v-model="searchValue" @input="checkInput">
        <input type="submit" name="submit" class="search_submit" @click.prevent="searchTarget('')">
      </form>
...
.search_form{
  
    display: flex;
   
    .search_input{
      flex:4;
     
    }
    .search_submit{
      flex:1;
    
    }
  }

实现排版控制。

@input

在搜索页中

        <input type="search" name="search" v-model="searchValue" @input="checkInput">
...
checkInput(){
            if (this.searchValue === '') {
                this.showHistory = true; //显示历史记录
                this.restaurantList = []; //清空搜索结果
                this.emptyResult = false; //隐藏搜索为空提示
            } 
        },

绑定了input事件，表单输入的时候实时响应该事件。