今天学习一个模糊查询的方法。以前是思维太固定了，使用的模糊查询都是后端调用方法，然后又要写sql语句，而今天学习到是它就在前端进行模糊查询。思想大概是：后端查询总的数据给到前端的俩个容器，一个容器再拜（容器1）是主容器负责 展示数据，另一个容器（容器2）是用来装模糊查询出来的数据，然后把容器2的数据赋给容器1。
具体操作如下：
前端我用的是element，根据element的特性v-model具有双向绑定的作用，

<el-input
    placeholder="请输入内容" v-model="select_word" style="width: 300px;margin-right: 10px" clearable>
 </el-input>

data(){
  return{
      /*展示的数据*/
      tableData:null,
     /*搜索的数据*/
      tempDate:[],
      /*搜索的内容*/
      select_word:'',
   }
}

绑定的数据要实时生效所以我们把它写到watch:{}里面

 watch:{
    /*模糊查询*/
    select_word:function (){
     //判断输入框是否为空（此时容器1和容器2的数据是一样的，都是从后台获取的全部数据）
      if (this.select_word==""){
          this.tableData=this.tempDate;
      }else {
       //清空容器1的数据
        this.tableData=[];
        //遍历容器2的数据
        for (let item of this.tempDate){
        //判断全部的数据列name里是否包含输入框的值，如果有就个容器1
          if (item.name.includes(this.select_word)){
            this.tableData.push(item);
          }
        }
      }
    }
  }