用vue实现图书管理的思路与代码
发布时间：2022-04-20 08:58:32 所属栏目：语言 来源：互联网
导读：这篇文章主要和大家分享一个vue实现简易图书管理的案例，具备展示图书列表，修改，增加和删除图书操作的功能，下文有具体的实现代码以及实现思路，感兴趣的朋友就继续往下看吧。 案例思路 1、图书列表 实现静态列表效果 基于数据实现模板效果 处理每行的操作
|
这篇文章主要和大家分享一个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; <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> （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
