vue实现图书管理系统
时间: 2023-09-05 17:08:35 浏览: 45
图书管理系统是一个比较典型的 CRUD 系统,使用 Vue 来实现比较简单。以下是一个简单的图书管理系统的示例:
首先,需要创建一个 Vue 实例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>图书管理系统</h1>
<table>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr v-for="(book, index) in books">
<td>{{ index + 1 }}</td>
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
<td>
<button @click="editBook(book)">编辑</button>
<button @click="deleteBook(index)">删除</button>
</td>
</tr>
</table>
<div>
<button @click="addBook">添加图书</button>
</div>
<div v-if="showAddBook">
<h2>添加图书</h2>
<form>
<div>
<label>书名:</label>
<input type="text" v-model="newBook.name">
</div>
<div>
<label>作者:</label>
<input type="text" v-model="newBook.author">
</div>
<div>
<label>价格:</label>
<input type="text" v-model="newBook.price">
</div>
<button type="submit" @click.prevent="saveBook">保存</button>
<button @click.prevent="cancelAdd">取消</button>
</form>
</div>
<div v-if="showEditBook">
<h2>编辑图书</h2>
<form>
<div>
<label>书名:</label>
<input type="text" v-model="selectedBook.name">
</div>
<div>
<label>作者:</label>
<input type="text" v-model="selectedBook.author">
</div>
<div>
<label>价格:</label>
<input type="text" v-model="selectedBook.price">
</div>
<button type="submit" @click.prevent="updateBook">更新</button>
<button @click.prevent="cancelEdit">取消</button>
</form>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
books: [
{ name: 'Vue.js 实战', author: '梁灏', price: 68 },
{ name: 'JavaScript 语言精粹', author: 'Douglas Crockford', price: 39 },
{ name: 'Python 编程从入门到实践', author: 'Eric Matthes', price: 69 },
],
newBook: {
name: '',
author: '',
price: '',
},
selectedBook: {},
showAddBook: false,
showEditBook: false,
},
methods: {
addBook() {
this.showAddBook = true;
},
saveBook() {
this.books.push(this.newBook);
this.newBook = {
name: '',
author: '',
price: '',
};
this.showAddBook = false;
},
cancelAdd() {
this.newBook = {
name: '',
author: '',
price: '',
};
this.showAddBook = false;
},
editBook(book) {
this.selectedBook = Object.assign({}, book);
this.showEditBook = true;
},
updateBook() {
for (let i = 0; i < this.books.length; i++) {
if (this.selectedBook === this.books[i]) {
this.books.splice(i, 1, this.selectedBook);
break;
}
}
this.selectedBook = {};
this.showEditBook = false;
},
cancelEdit() {
this.selectedBook = {};
this.showEditBook = false;
},
deleteBook(index) {
this.books.splice(index, 1);
},
},
});
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了一个 Vue 实例,并且定义了一些数据,如图书列表、新增图书和编辑图书的表单等。然后,我们通过 `v-for` 指令将图书列表渲染到页面上,通过 `v-if` 指令控制新增图书和编辑图书的表单是否显示。最后,我们定义了一些方法,如添加图书、保存图书、取消添加、编辑图书、更新图书、取消编辑和删除图书等,来实现图书管理系统的基本功能。
需要注意的是,在实际的项目中,我们可能需要使用 Vue Router 来实现路由的跳转,使用 Vuex 来进行状态管理等。另外,为了方便管理数据,我们还可以使用 Element UI 等 UI 框架来实现页面的布局和样式。