vue实现添加与删除图书功能

作为网站作者，我很愿意为您详细讲解“vue实现添加与删除图书功能”的完整攻略。

1.添加图书功能

首先，在vue中实现添加图书功能，需要先创建组件。接下来，我们先来看一个添加图书的示例：

1.1创建组件

我们先在src目录下创建一个名为“AddBook.vue”的组件。在这个组件中，我们需要定义一个表单，以便用户可以输入书籍信息。代码如下：

<template>
  <div>
    <h2>添加书籍</h2>
    <form>
      <!-- 书籍名称 -->
      <div>
        <label>书籍名称：</label>
        <input v-model.trim="bookName" type="text" />
      </div>
      <!-- 书籍作者 -->
      <div>
        <label>书籍作者：</label>
        <input v-model.trim="bookAuthor" type="text" />
      </div>
      <!-- 书籍价格 -->
      <div>
        <label>书籍价格：</label>
        <input v-model.trim="bookPrice" type="number" />
      </div>
      <button @click.prevent="addBook">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookName: "",
      bookAuthor: "",
      bookPrice: ""
    };
  },
  methods: {
    addBook() {
      // 将表单数据打包成一个对象
      const book = {
        name: this.bookName.trim(),
        author: this.bookAuthor.trim(),
        price: parseFloat(this.bookPrice)
      };
      // 将对象传递给父组件
      this.$emit("add-book", book);
      // 清空表单数据
      this.bookName = "";
      this.bookAuthor = "";
      this.bookPrice = "";
    }
  }
};
</script>

这个组件包含一个表单，用户可以在表单中输入书籍信息，并点击“添加”按钮进行添加。当用户点击“添加”按钮时，addBook方法会将表单数据打包成一个对象，并使用$emit方法将这个对象传递给父组件（即包含AddBook组件的父组件）进行处理。

1.2父组件处理方法

由于表单数据需要在父组件中进行处理，所以我们需要在父组件中定义一个方法进行处理。代码如下：

<template>
  <div>
    <AddBook @add-book="addBook"></AddBook>
    <BookList :bookList="bookList" @delete-book="deleteBook"></BookList>
  </div>
</template>

<script>
import AddBook from "@/components/AddBook.vue";
import BookList from "@/components/BookList.vue";

export default {
  components: {
    AddBook,
    BookList
  },
  data() {
    return {
      bookList: []
    };
  },
  methods: {
    addBook(book) {
      // 将新书添加到书籍列表中
      this.bookList.push(book);
    },
    deleteBook(index) {
      // 从书籍列表中删除一本书
      this.bookList.splice(index, 1);
    }
  }
};
</script>

在父组件中，我们引入了AddBook和BookList两个组件，其中AddBook组件用于添加书籍，BookList组件用于展示书籍列表。

在父组件中，我们定义了两个方法：addBook方法用于将新书添加到书籍列表中，deleteBook方法用于从书籍列表中删除一本书。

1.3添加书籍

现在我们已经创建了AddBook组件和父组件的逻辑，可以开始添加新书了。在页面中展示父组件，当我们在AddBook表单中输入书籍信息并点击“添加”按钮时，表单数据会被打包成一个对象，并通过$emit方法发送给父组件的addBook方法：

<AddBook @add-book="addBook"></AddBook>

在父组件的addBook方法中，我们使用push方法将新书添加到书籍列表中：

addBook(book) {
  // 将新书添加到书籍列表中
  this.bookList.push(book);
},

到这里，我们就成功地实现了图书添加功能。

2.删除图书功能

在vue中实现删除图书功能，需要先创建组件。接下来，我们先来看一个删除图书的示例：

2.1创建组件

我们先在src目录下创建一个名为“BookList.vue”的组件。在这个组件中，我们需要展示书籍列表，并为每本书籍添加一个删除按钮。代码如下：

<template>
  <div>
    <h2>书籍列表</h2>
    <table>
      <thead>
        <tr>
          <th>书籍名称</th>
          <th>书籍作者</th>
          <th>书籍价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(book, index) in bookList" v-bind:key="index">
          <td>{{ book.name }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.price }}</td>
          <td>
            <button @click="deleteBook(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    bookList: {
      type: Array,
      default: []
    }
  },
  methods: {
    deleteBook(index) {
      // 触发删除书籍事件，将删除的书籍下标传递给父组件
      this.$emit("delete-book", index);
    }
  }
};
</script>

这个组件包含了一个表格，展示了所有的书籍信息。每一行数据后面都有一个删除按钮，当用户点击该按钮时，deleteBook方法会触发删除书籍事件，并将要删除的书籍下标传递给父组件进行处理。

2.2父组件处理方法

由于删除书籍的操作需要在父组件中进行处理，所以我们需要在父组件中定义方法进行处理。代码如下：

<template>
  <div>
    <AddBook @add-book="addBook"></AddBook>
    <BookList :bookList="bookList" @delete-book="deleteBook"></BookList>
  </div>
</template>

<script>
import AddBook from "@/components/AddBook.vue";
import BookList from "@/components/BookList.vue";

export default {
  components: {
    AddBook,
    BookList
  },
  data() {
    return {
      bookList: []
    };
  },
  methods: {
    addBook(book) {
      // 将新书添加到书籍列表中
      this.bookList.push(book);
    },
    deleteBook(index) {
      // 从书籍列表中删除一本书
      this.bookList.splice(index, 1);
    }
  }
};
</script>

在父组件中，我们引入了AddBook和BookList两个组件，其中AddBook组件用于添加书籍，BookList组件用于展示书籍列表。

在父组件中，我们定义了两个方法：addBook方法用于将新书添加到书籍列表中，deleteBook方法用于从书籍列表中删除一本书。

2.3删除书籍

现在我们已经创建了BookList组件和父组件的逻辑，可以开始删除书籍了。在页面中展示父组件，当我们点击BookList组件中的删除按钮时，会触发该组件中的deleteBook方法，并使用$emit方法将该书籍下标传递给父组件的deleteBook方法：

<BookList :bookList="bookList" @delete-book="deleteBook"></BookList>

在父组件的deleteBook方法中，我们使用splice方法从书籍列表中删除一本书籍：

deleteBook(index) {
  // 从书籍列表中删除一本书
  this.bookList.splice(index, 1);
}

到这里，我们就成功地实现了图书删除功能。

总结：本文详细讲解了“vue实现添加与删除图书功能”的完整攻略，通过实例化组件、定义方法和监听事件，成功实现了添加和删除图书的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现添加与删除图书功能 - Python技术站