vue.js图书管理系统代码
时间: 2024-04-14 08:22:45 浏览: 13
Vue.js是一种流行的JavaScript框架,用于构建用户界面。下面是一个简单的Vue.js图书管理系统的代码示例:
HTML部分:
```html
<div id="app">
<h1>图书管理系统</h1>
<input type="text" v-model="newBookTitle" placeholder="输入书名">
<button @click="addBook">添加图书</button>
<ul>
<li v-for="book in books" :key="book.id">
{{ book.title }}
<button @click="removeBook(book.id)">删除</button>
</li>
</ul>
</div>
```
JavaScript部分:
```javascript
new Vue({
el: '#app',
data: {
newBookTitle: '',
books: [
{ id: 1, title: 'JavaScript高级编程' },
{ id: 2, title: 'Vue.js实战' },
{ id: 3, title: '深入理解计算机系统' }
]
},
methods: {
addBook() {
if (this.newBookTitle !== '') {
const newBook = {
id: this.books.length + 1,
title: this.newBookTitle
};
this.books.push(newBook);
this.newBookTitle = '';
}
},
removeBook(id) {
this.books = this.books.filter(book => book.id !== id);
}
}
});
```
这段代码实现了一个简单的图书管理系统,包括添加图书和删除图书的功能。用户可以在输入框中输入书名,点击"添加图书"按钮后,会将输入的书名添加到图书列表中。每本图书旁边都有一个"删除"按钮,点击该按钮可以将对应的图书从列表中删除。