圆月山庄资源网 Design By www.vgjia.com
本文实例为大家分享了vue实现图书管理系统的具体代码,供大家参考,具体内容如下
组件代码
<template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id" v-focus> 编号: </label> <input type="text" id="id" v-model="id" :disabled="flag"> <label for="name"> 名称: </label> <input type="text" id="name" v-model="name"> <button @click="add(addOrUpdate)" :disabled="subFlag">提交</button> </div> </div> </div> <div class="total"> <span>图书总数:</span> <span>{{ totalNum }}</span> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="book in books"> <td> {{ book.id }} </td> <td> {{ book.name }} </td> <td> {{ book.date | date-format }} </td> <td> <a href="" @click.prevent=" rel="external nofollow" updateBook(book.id)">修改</a> <span>|</span> <a href="" @click.prevent = 'deleteBook(book.id)'>删除</a> </td> </tr> </tbody> </table> </div> </div> </template> <script> export default { data(){ return{ books:[ { id: 1, name: '三国演义', date: 2525609975000 }, { id: 2, name: '水浒传', date: 2525609975000 }, { id: 3, name: '红楼梦', date: 2525609975000 }, { id: 4, name: '西游记', date: 2525609975000 } ], id:'', name:'', flag:false, // id输入框是否可修改标识 addOrUpdate: 0, // 0代表添加 1代表修改 subFlag:false, // 提交按钮是否禁用(图书存在时禁用) } }, methods:{ // 添加图书的方法 add() { if(this.addOrUpdate===0){ // 添加图书 this.books.push({ id: this.id, name: this.name, date: new Date() }); }else{ const book = this.books.filter((book)=>{ return book.id === this.id; }); book[0].name = this.name } // 添加之后清空input框 this.id = ''; this.name = ''; this.flag = false }, // 更新图书的方法 updateBook(id){ this.addOrUpdate = 1; // 需要修改的当前图书信息 const book = this.books.filter((book)=>{ return book.id === id; }); // 让input框显示相应内容 this.id = book[0].id; this.name = book[0].name; this.flag = true; }, deleteBook(id){ // 获取当前图书的索引 const index = this.books.findIndex((book)=>{ return book.id === id }); this.books.splice(index, 1) } }, computed:{ totalNum(){ return this.books.length } }, // 自定义局部指令 directives:{ focus:{ inserted(el){ // 自动聚焦 el.focus() } } }, // 监视图书是否存在 watch:{ name:{ deep:true, handler(val){ const book = this.books.find((book)=>{ return book.name === val }); if(book){ this.subFlag = true }else{ this.subFlag = false } } } } } </script> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10px; border: 1px dashed #F3DCAB; height: 35px; line-height: 35px; } .grid th { background-color: #F3DCAB; } .grid .book { padding-bottom: 10px; padding-top: 5px; background-color: #F3DCAB; } .grid .total { height: 30px; line-height: 30px; background-color: #F3DCAB; border-top: 1px solid #C2D89A; } </style>
过滤器文件index.js
import Vue from 'vue' import format from 'date-fns/format' // 自定义过滤器 Vue.filter('date-format', function (value, formatStr='yyyy-MM-dd HH:mm:ss') { return format(value, formatStr) });
main.js引入
import './filters'
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,图书管理系统
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年06月13日
2024年06月13日
- 叶灵·张金泉-1988《流行榜》TP(保声唱片)[WAV]
- 《WOW》11.0发售日官宣 8月26日直面萨拉塔斯!
- 谷歌Youtube员工泄露任天堂情报 谷歌称其为无心之失
- 5minlab将在 Wholesome Direct 2024 上发布新游戏《Undusted》
- 曾淑勤.1996-梦桥【点将】【WAV+CUE】
- 吴婉芳.1990-吴婉芳(郁金香的梦)【宝艺星】【WAV+CUE】
- 群星.2024-天行健影视剧原声带【企鹅影视】【FLAC分轨】
- 孟庭苇《情人的眼泪》DSD+SBM版[WAV+CUE][600MB]
- 《抖音热门歌曲合集》[FLAC/分轨][12G]
- 费翔《跨越四海的歌声》纯银版[WAV+CUE][450MB]
- 世界启元五大文明分析 谁是最强文明
- 世界启元辛加技能怎么搭配 辛加技能组合攻略推荐
- 世界启元事件系统玩法介绍 世界启元事件系统玩法图文攻略
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 2个女生.2000-坚固友情精选辑【EMI百代】【WAV+CUE】