这个示例展示了如何使用Vue.js创建一个简单的图书管理系统，包括添加、修改和删除图书的功能。用户可以输入图书的编号和名称，点击添加按钮来新增图书，或者选择已有的图书进行修改。此外，页面还显示了所有图书的列表，每条记录包含ID、名称和日期，并提供了修改和删除的操作链接。
这个小项目可以进行图书的增加，修改以及删除，具体代码以及展示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#books {
width: 700px;
margin: 100px auto;
text-align: center;
background-color: rgb(192, 255, 195);
box-shadow: 10px 10px 10px silver;
}
#books .fi {
margin-top: 10px;
}
#books table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
#books table td {
border: 1px dashed rgb(197, 255, 192);
height: 35px;
line-height: 35px;
}
#books a {
text-decoration: none;
cursor: pointer;
}
#books a:hover {
color: orangered;
}
#books input[type='text'] {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<div id="books">
<h1>图书管理</h1>
<hr>
<div class="fi">
<span>编号：<input type="text" v-model="id" :disabled="operation"></span>
<span>名称：<input type="text" v-model="name"></span>
<button @click="addBook">添加</button>
</div>
<table>
<tr>
<th>ID</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.date |formate("yyyy-MM-dd")}}</td>
<td>
<a @click.prevent="updateBook(book)">修改</a>|
<a @click.prevent="deleteBook(book.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
<script>
Vue.filter('formate', (value, args) => {
if (args == "yyyy-MM-dd") {
var reg = "",
reg = value.getFullYear() + "-" + parseInt(value.getMonth() + 1) + "-" + value.getDate();
return reg;
}
return value;
})
const app = new Vue({
el: '#app',
data: {
id: '',
name: '',
operation: false,
updatedBook: {}, // 被修改的图书对象
books: [{
id: 1,
name: '斗罗大陆',
date: new Date()
}, {
id: 2,
name: '绝世唐门',
date: new Date()
}, {
id: 3,
name: '龙王传说',
date: new Date()
}, {
id: 4,
name: '终极斗罗',
date: new Date()
}]
},
methods: {
addBook() {
if (this.operation) {
// operation = true 修改操作
this.updatedBook.name = this.name
this.operation = false
this.updatedBook = {}
} else {
// operation = false 添加操作
this.books.push({
id: this.id,
name: this.name,
date: new Date()
})
}
this.id = ''
this.name = ''
},
updateBook(book) {
this.updatedBook = book
this.id = this.updatedBook.id
this.name = this.updatedBook.name
this.operation = true
},
deleteBook(id) {
this.books = this.books.filter(book => {
return book.id !== id
})
}
}
});
</script>
</body>
</html>
效果图如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
