在vue中如何实现对如何实现图书的编辑

要实现图书编辑，你可以为每本书添加一个 `isEditable` 属性，用来表示该书名是否可编辑。当用户点击编辑按钮时，将对应书的 `isEditable` 属性设置为 `true`，从而显示出输入框，让用户可以修改书名。当用户完成修改后，再将 `isEditable` 属性设为 `false`，隐藏输入框，同时更新书名。

以下是代码示例：

<template>
  <div>
    <h2>图书管理系统</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>添加时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.id }}</td>
          <td>
            <span v-if="book.isEditable">
              <input type="text" v-model="book.name" @blur="updateBookName(book.id)">
            </span>
            <span v-else>{{ book.name }}</span>
          </td>
          <td>{{ book.time }}</td>
          <td>
            <button @click="book.isEditable = true">编辑</button>
            <button @click="del(book.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <label>书名：</label>
      <input type="text" v-model="name" @input="onchange">
      <button :disabled="isEditable" @click="add">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      name: '',
      books: [
        { 'id': 1, 'name': 'Vue.js入门', 'time': new Date(), 'isEditable': false }
      ],
      isEditable: true
    }
  },
  methods: {
    onchange() {
      if (this.name !== '') {
        this.isEditable = false
      } else {
        this.isEditable = true
      }
    },
    add: function () {
      for (let i = 0; i < this.books.length; i++) {
        if (this.books[i].name === this.name) {
          console.log("该书已经存在")
          return
        }
      }
      this.books.push({ 'id': this.id, 'name': this.name, 'time': new Date(), 'isEditable': false })
      this.id++
      this.name = ''
      console.log(this.books)
    },
    del(id) {
      let index = this.books.findIndex((item) => {
        if (item.id == id) {
          return true
        }
      })
      this.books.splice(index, 1)
    },
    updateBookName(id) {
      let book = this.books.find(item => item.id === id);
      book.isEditable = false; // 隐藏输入框
    }
  }
}
</script>

在上面的代码中，我添加了一个 `isEditable` 属性，并将其初始值设为 `false`，表示书名不可编辑。当用户点击编辑按钮时，将 `isEditable` 设为 `true`，从而显示出输入框。当用户完成修改后，将 `isEditable` 设为 `false`，从而隐藏输入框，同时更新书名。注意要使用 `v-if` 和 `v-else` 分别显示输入框和书名，以达到动态切换的效果。