vue实现书籍添加删除
实现书籍添加删除功能
在Vue中实现书籍的添加和删除功能，可以通过以下步骤完成。假设使用Vue 3的Composition API和<script setup>语法。
数据定义
定义一个响应式数组来存储书籍数据：
import { ref } from 'vue'
const books = ref([
{ id: 1, title: 'Vue 3入门', author: '张三' },
{ id: 2, title: 'JavaScript高级编程', author: '李四' }
])
const newBook = ref({
title: '',
author: ''
})添加书籍功能
创建一个方法来添加新书籍：
const addBook = () => {
if (newBook.value.title && newBook.value.author) {
books.value.push({
id: Date.now(),
title: newBook.value.title,
author: newBook.value.author
})
newBook.value.title = ''
newBook.value.author = ''
}
}删除书籍功能
根据书籍ID删除指定书籍：
const deleteBook = (id) => {
books.value = books.value.filter(book => book.id !== id)
}模板部分
<template>
<div>
<h2>书籍列表</h2>
<ul>
<li v-for="book in books" :key="book.id">
{{ book.title }} - {{ book.author }}
<button @click="deleteBook(book.id)">删除</button>
</li>
</ul>
<h2>添加新书</h2>
<form @submit.prevent="addBook">
<input v-model="newBook.title" placeholder="书名">
<input v-model="newBook.author" placeholder="作者">
<button type="submit">添加</button>
</form>
</div>
</template>样式优化
可以添加一些基本样式改善用户体验：
ul {
list-style: none;
padding: 0;
}
li {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
display: flex;
justify-content: space-between;
}
button {
margin-left: 10px;
cursor: pointer;
}
input {
margin-right: 10px;
padding: 5px;
}功能扩展
如果需要更复杂的功能，可以考虑：
- 添加编辑功能
- 实现本地存储持久化
- 添加表单验证
- 使用Pinia进行状态管理
这个实现提供了基本的书籍添加和删除功能，可以根据实际需求进一步扩展和完善。
