Vue学生管理案例，v-for、v-model数据双向绑定

Vue学生管理案例，v-for、v-model数据双向绑定
示图：

代码：

<template>
  <div class="home">
    <h1>主页</h1>
    <table border="1" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td>id</td>
          <td>姓名</td>
          <td>时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item,index) in search(keywords)" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.time}}</td>
          <td><a @click.prevent="del(index)">删除</a></td>
        </tr>
        <tr>
          <td><input type="text" v-model="id" placeholder="请输入学生id"></td>
          <td><input type="text" v-model="name" placeholder="请输入学生姓名"></td>
          <td><input type="text" v-model="keywords" placeholder="请输入搜索姓名"></td>
          <td><input type="button" @click="add" value="新增"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      list:[
        {id:1,name:'小刚',time:new Date()},
        {id:2,name:'王强',time:new Date()},
        {id:3,name:'李岚',time:new Date()},
      ],
      id:'',
      name:'',
      keywords:'', //搜索姓名
    }
  },
  methods: {
    //添加学生信息
    add(){
      let stu={
        id:this.id,
        name:this.name,
        time:new Date()
      }
      this.list.push(stu)
      //重置输入框
      this.id=this.name=''
    },
    //删除学生信息
    del(index){
      this.list.splice(index,1)
    },
    //搜索学生信息
    search(keywords){
      let newList = [];
      this.list.forEach(item=>{
        if(item.name.indexOf(keywords)!=-1){
            newList.push(item)
        }
      })
      return newList;
    }
  },
}
</script>

<style scoped>
 table{
 font-size: 20px;
 text-align: center;
 cursor: default;
 }

 table a:hover{
  color:red;
 }

</style>