<template>
    <div>
      <span>SearchByName: </span>
      <input v-model="text"><button type="button" name="button" @click="add">查找</button>
      <table border="1" >
        <tr>
          <th>姓名</th>
          <th>性別</th>
          <th>年齡</th>
        </tr>
          <tr v-for = "item in newTableList">
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
          </tr>
      </table>
    </div>
</template>
<script>
    export default {
        data() {
            return{
              text: '',
               msg:"",
               tableList:[
                 {name:"華仔",sex:"男",age:10},
                 {name:"作別",sex:"女",age:20},
                 {name:"哈嘍",sex:"男",age:30},
                 {name:"HTML",sex:"女",age:40},
                 {name:"我愛羅",sex:"男",age:50},
               ]
            }
        },
        computed: {
          newTableList() {
             return this.tableList.filter((user)=>{
                 return user.name.toLowerCase().indexOf(this.msg.toLowerCase()) !== -1;
             })
          }
        },
        methods:{
            add(){
              this.msg =  this.text;
            }
        }
    };
</script>
<style media="screen" scoped>
  td,th{
    padding:10px;
  }
  table{
    text-align: center;
  }
</style>