<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的图书管理系统界面，需要实现图书信息的增加、提交、删除、修改操作，并且要保证id的唯一性。同时，提交数据时需要增加一条提交时间的数据并显示在界面中。

针对这个问题，我可以给出一些思路和代码实现：

1. 定义数据模型

首先需要定义一个数据模型，用来存储图书信息。可以定义一个数组books来存储所有图书信息，每本图书需要包含id、name和date三个字段。

data() {
  return {
    books: [
      { id: 1, name: 'JavaScript高级程序设计', date: '2021-01-01' },
      { id: 2, name: 'Vue.js实战', date: '2021-01-02' },
      { id: 3, name: 'Node.js入门', date: '2021-01-03' }
    ],
    id: '',
    name: '',
    flag: false
  }
}

其中flag的作用是用来判断当前操作是添加图书还是修改图书。

2. 实现图书添加功能

实现图书添加功能需要给提交按钮添加点击事件，将输入的图书信息添加到books数组中。同时需要判断输入的id是否已经存在，如果存在则替换原来的数据。

methods: {
  handle() {
    if (this.id === '') {
      alert('请输入图书编号')
      return
    }
    let book = this.books.find(item => item.id === this.id)
    if (book) {
      book.name = this.name
      book.date = new Date().toLocaleDateString()
    } else {
      let newBook = {
        id: this.id,
        name: this.name,
        date: new Date().toLocaleDateString()
      }
      this.books.push(newBook)
    }
    this.id = ''
    this.name = ''
  }
}

3. 实现图书删除功能

实现图书删除功能需要给删除按钮添加点击事件，根据图书id从books数组中删除对应的图书信息。

methods: {
  handle() {
    // ...
  },
  remove(id) {
    let index = this.books.findIndex(item => item.id === id)
    if (index !== -1) {
      this.books.splice(index, 1)
    }
  }
}

4. 实现图书修改功能

实现图书修改功能需要给修改按钮添加点击事件，将当前图书的id传递到编辑页面，用来确定需要修改的是哪一本图书。

methods: {
  handle() {
    // ...
  },
  toEdit(id) {
    this.id = id
    let book = this.books.find(item => item.id === id)
    this.name = book.name
    this.flag = true
  }
}

5. 添加提交时间数据

添加提交时间数据需要在添加或修改图书信息时，将当前时间保存到date字段中。

methods: {
  handle() {
    // ...
    let newBook = {
      id: this.id,
      name: this.name,
      date: new Date().toLocaleDateString()
    }
    this.books.push(newBook)
    // ...
  },
  toEdit(id) {
    // ...
    let book = this.books.find(item => item.id === id)
    book.date = new Date().toLocaleDateString()
    // ...
  }
}

以上就是实现图书管理系统的主要思路和代码实现，具体实现过程还需要根据具体需求进行调整和完善。