<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' :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> <!--- 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍 ---> <a href="" @click.prevent='toEdit(item.id)'>修改</a > <span>|</span> <a href="" @click.prevent>删除</a > </td> </tr> </tbody> </table> </div> </div>用vue实现界面想要的图书信息的增加提交，删除，修改，同时id是唯一的，如果提交时id重复则将原来的数据替换掉

好的，这是一个使用Vue实现图书信息增删改查的界面。实现方法如下：

1. 定义一个Vue实例，其中包含一个books数组，存储所有的图书信息，以及一个id和name变量，分别用于输入图书编号和名称。

2. 实现一个handle方法，用于添加图书信息。在该方法中，先判断当前id是否已经存在于books数组中，如果存在，则替换对应的图书信息，否则添加一条新的图书信息。

3. 实现一个toEdit方法，用于跳转到修改图书信息的界面。在该方法中，将当前图书的id作为参数传递。

4. 实现一个delete方法，用于删除图书信息。在该方法中，根据传递的参数删除对应的图书信息。

下面是代码示例：

new Vue({
  el: '#app',
  data: {
    books: [], // 存储所有的图书信息
    id: '',
    name: '',
    flag: false // 是否禁用id输入框
  },
  methods: {
    handle () {
      // 判断当前id是否已经存在于books数组中
      const book = this.books.find(item => item.id === this.id)
      if (book) {
        // 如果存在，则替换对应的图书信息
        book.name = this.name
      } else {
        // 否则添加一条新的图书信息
        this.books.push({
          id: this.id,
          name: this.name,
          date: new Date().toLocaleDateString()
        })
      }
      // 清空输入框
      this.id = ''
      this.name = ''
    },
    toEdit (id) {
      // 跳转到修改图书信息的界面
      // ...
    },
    delete (id) {
      // 根据传递的参数删除对应的图书信息
      this.books = this.books.filter(item => item.id !== id)
    }
  }
})

当然，这只是一个基本的示例，实际应用中还需要考虑很多细节问题，比如如何验证用户输入、如何进行数据持久化等等。