vue案例--實現搜索功能

1、原型：

2、實現搜索功能代碼

<template>
  <div class="safetyInfo">
    <strong>用戶名：</strong><input type="text" name="" id="username" placeholder="用戶名" v-model="username"/>
    <strong>性別：</strong>
    <select v-model="sex">
      <option>1</option>
      <option>0</option>
    </select>
<!--    <input type="text" name="" id="sex" placeholder="性別" v-model="sex"/>-->
    <button @click="btn" class="btn btn-default">搜索</button> <!--@click="btn"這部分為vue語法-->
    <button @click="btn_cl" class="btn btn-default">清空</button> <!--@click="btn"這部分為vue語法-->
    <hr/>
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>編號</th>
        <th>用戶名</th>
        <th>電話</th>
        <th>年齡</th>
        <th>性別</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in searchData" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.userName}}</td>
        <td>{{item.phoneNumber}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'link',
  data () {
    return {
      username:'',
      sex:'',
      searchData: [],
      products:[
      ],
    }
  },
  //勾子
  methods:{
    btn_cl:function(){
      this.username = '';//用戶名
      this.sex = '';//性別
    },
    btn:function(){
      var username = this.username;//用戶名
      var sex = this.sex;//性別
      console.log(username)
      if( username != '' || sex != '' ) {
        console.log("帶參搜索")
        this.$http.post('http://127.0.0.1:8081/getUserByParam',
          {
            userName: this.username,
            sex:this.sex
          }).then((response) => {
          this.products = [response.body.user]
          console.log(this.products)
          if(this.products[0]==null ) {alert("沒有對應的數據")}
          console.log(this.products)
          if (true) {
            this.searchData = this.products.filter(function (product) {
              console.log(product)
              return Object.keys(product).some(function (key) {
                console.log(key)
                return String(product[key]).toLowerCase().indexOf(username) > -1
              })
            })
          }
        }).catch(function (err) {
          console.log(err);
        })
      }else {
        this.$http.get('http://127.0.0.1:8081/getUser').then((response) => {
          console.log("無參搜索")
          this.products = response.body.user
          if (true) {
            console.log(this.products)
            this.searchData = this.products.filter(function (product) {
              console.log(product)
              return Object.keys(product).some(function (key) {
                console.log(key)
                return String(product[key]).toLowerCase().indexOf(username) > -1
              })
            })
          }
        }).catch(function (err) {
          console.log(err);
        })
      }
    }
  }
}
</script>