vue实现添加与删除图书

好的，首先需要明确的是添加与删除图书需要有一个数据源来存储图书信息，这里我假设使用一个 books 数组来存储每本图书的信息。接下来就可以开始编写代码了。

添加图书的实现：

1. 在 Vue 实例中声明一个 data 属性来存储 books 数组：

data: {
  books: [
    {id: 1, name: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas'},
    {id: 2, name: 'JavaScript权威指南', author: 'David Flanagan'},
    {id: 3, name: 'CSS权威指南', author: 'Eric A.Meyer'},
    {id: 4, name: 'HTML5与CSS3基础教程', author: '大漠穷秋'}
  ],
  newBook: {
    id: '',
    name: '',
    author: ''
  }
}

2. 在模板中使用 v-model 指令绑定表单元素的值，以便能够在 Vue 实例中获取表单数据：

<div>
  <h2>添加图书</h2>
  <form>
    <div>
      <label>编号：</label>
      <input type="text" v-model="newBook.id">
    </div>
    <div>
      <label>书名：</label>
      <input type="text" v-model="newBook.name">
    </div>
    <div>
      <label>作者：</label>
      <input type="text" v-model="newBook.author">
    </div>
    <button type="button" @click="addBook">添加</button>
  </form>
</div>

3. 在 methods 中定义 addBook 方法，将表单数据添加到 books 数组中：

methods: {
  addBook() {
    this.books.push(this.newBook);
    this.newBook = {
      id: '',
      name: '',
      author: ''
    };
  }
}

删除图书的实现：

1. 在模板中使用 v-for 指令渲染 books 数组中的每一本图书，并为每本图书添加一个删除按钮：

<div v-for="(book, index) in books" :key="book.id">
  <span>{{ book.id }}、{{ book.name }} - {{ book.author }}</span>
  <button type="button" @click="removeBook(index)">删除</button>
</div>

2. 在 methods 中定义 removeBook 方法，根据索引从 books 数组中删除指定的图书：

methods: {
  removeBook(index) {
    this.books.splice(index, 1);
  }
}

以上就是 Vue 实现添加与删除图书的简单示例，你可以根据自己的实际需求进行修改和完善。