SOURCE

var vm=new Vue({
    el:'#app',
    data:{
        id:'',
        name:'',
        //对属性值操作使用bind绑定
        flag:false,
        books:[{
            id:1,
            name:'三国演义',
            date:''
        },{
            id:2,
            name:'三国演义',
            date:''
        },{
            id:3,
            name:'三国演义',
            date:''
        },{
            id:4,
            name:'三国演义',
            date:''
        },
        ]
    },
    methods:{
        //添加数据
        handle:function(){
            if(this.flag){
                //=》父级作用域的this 。handle的作用域
                
            this.books.some((item) =>{
                if(item.id=this.id){
                    item.name=this.name;
                    return true;
                }
            });
            this.flag=false;
            }else{
           var book={};
            book.id=this.id;
            book.name=this.name;
            book.date='';
            this.books.push(book);
            this.id='';
            this.name='';
            }
            
        },
        toEdit:function(id){
            //编号不可获取
            this.flag=true;
            //根据id查询要编辑的数据
            console.log(id);
            var book=this.books.filter(function(item){
                return item.id==id;
            });
            //将book中的id与name对应到this。id与name里面
             this.id=book[0].id;
                this.name=book[0].name;
        },
        todelete:function(id){
       var index=this.books.findIndex(function(item){
           return item.id==id;
       });
       this.books.splice(index,1);
    }
    }
     
});

<div id="app">
<div class="grid">
<div>
    <h1>图书管理</h1>
    <div class="book">
        <div>
            <label for="id">
                编号：
            </label>
            <input type="text" id="id" v-model='id' v-bind:disabled='flag'>
            <label for="name">
            名字：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle'>提交</button>
        </div> 
    </div>
</div>
<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>编号</th>
            <th>编号</th>
            <th>编号</th>
        </tr>
    </thead>
      <tbody>
          <tr :key='item.id' v-for='item in books'>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>
                <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                <a href="" @click.prevent='todelete(item.id)'>删除</a>
              </td>
          </tr>
      </tbody>
</table>
</div>
</div>

.grid{
    margin: auto;
    width: 500px;
    text-align: center;
}
.grid table{
    width: 100%;
    border-collapse: collapse;
}
.grid th,td{
    padding: 10;
    border: 1px dashed orange;
    height: 35px;
    line-height: 35px;
}
.grid th{
    background-color: orange;
}