Vue实现图书管理案例
网络编程 发布日期：2025/10/26 浏览次数：1
正在浏览：Vue实现图书管理案例
本文实例为大家分享了Vue实现图书管理的具体代码，供大家参考，具体内容如下
案例效果
案例思路
1、图书列表
- 实现静态列表效果
- 基于数据实现模板效果
- 处理每行的操作按钮
2、添加图书
- 实现表单的静态效果
- 添加图书表单域数据绑定
- 添加按钮事件绑定
- 实现添加业务逻辑
3、修改图书
- 修改信息填充到表单
- 修改后重新提交到表单
- 重用添加和修改方法
4、删除图书
- 删除按钮绑定时间处理方法
- 实现删除业务逻辑
5、常用特性应用场景
- 过滤器（格式化日期）
- 自定义指令（获取表单焦点）
- 计算属性（统计图书数量）
- 侦听器（验证图书和编号的存在性）
- 生命周期（图书数据处理）
代码
基本样式
<style type="text/css">
.grid {
margin: auto;
width: 550px;
text-align: center;
}
.grid table {
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10;
border: 1px dashed orange;
height: 35px;
}
.grid th {
background-color: orange;
}
.grid .book {
width: 550px;
padding-bottom: 10px;
padding-top: 5px;
background-color: lawngreen;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: lawngreen;
border-top: 1px solid orange;
}
</style>
静态布局
<div id="app">
<div class='grid'>
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for='id'>
编号：
</label>
<input type="text" id="id" v-model='id' :disabled='flag' v-focus>
<label for="name">
名称：
</label>
<input type="text" id='name' v-model='name'>
<button @click='handle' :disabled='submitFlag'>提交</button>
</div>
</div>
</div>
<div class='total'>
<span>图书总数：</span><span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | format('yyyy-MM-dd hh:MM:ss')}}</td>
<td><a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
效果实现
<script type="text/javascript" src="/UploadFiles/2021-04-02/vue.js">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。