Vue实现图书管理案例
(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
本文实例为大家分享了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">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:Nodejs 微信小程序消息推送的实现