基于vue的图书管理系统,vue图书管理系统毕业设计
这篇文章主要为大家详细介绍了某视频剪辑软件实现图书管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现图书管理系统的具体代码，供大家参考，具体内容如下
组件代码
模板
div id=应用程序
div class=grid
差异
氕图书管理/h1
div class=book
差异
=id v焦点的标签
编号：
/标签
输入类型=text id=id v-model=id :禁用=标志
=名称的标签
名称：
/标签
输入类型=text id=name v-model=name
button @ click= add(addOrUpdate):disabled= subFlag 提交/按钮
/div
/div
/div
div class=合计
跨度图书总数：/span
span{{ totalNum }}/span
/div
桌子
四羟乙基己二酰胺
tr
泰国(泰国)编号/th
泰国(泰国)名称/th
泰国(泰国)时间/th
泰国(泰国)操作/th
/tr
/thead
在需要分行下载处加上
tr v-for=书中的书
td {{ book.id }} /td
td {{ book.name }} /td
td {{ book.date date-format }} /td
任务描述
a href= @ click。防止= rel=外部无跟随更新图书(图书。id)修改/a
span/span
a href= @ click。防止=删除书(书。id)删除/a
/td
/tr
/tbody
/表格
/div
/div
/模板
脚本
导出默认值{
data(){
返回{
书籍：[
{
id: 1，
名称： 三国演义，
日期：2525609975000
},
{
id: 2，
名称： 水浒传，
日期：2525609975000
},
{
id: 3，
名称： 红楼梦，
日期：2525609975000
},
{
id: 4，
名称： 西游记，
日期：2525609975000
}
],
id: ，
名称：,
标志：假，//id输入框是否可修改标识
addOrUpdate: 0，//0代表添加一代表修改
subFlag:false，//提交按钮是否禁用（图书存在时禁用)
}
},
方法：{
//添加图书的方法
add() {
if(this.addOrUpdate===0){
//添加图书
this.books.push({
id: this.id，
名称：this.name
日期：新日期()
});
}否则{
const book=this。书籍。过滤器((书)={
还书。id===这个。id；
});
图书[0]。name=this.name
}
//添加之后清空投入框
这个。id=
这个。name=
this.flag=false
},
//更新图书的方法
updateBook(id){
这个。addorupdate=1；
//需要修改的当前图书信息
const book=this。书籍。过滤器((书)={
返回book.id===id
});
//让投入框显示相应内容
this.id=book[0].id；
this.name=book[0].姓名；
this.flag=true
},
删除图书(id){
//获取当前图书的索引
常量索引=this。书籍。查找索引((书籍)={
返回book.id===id
});
this.books.splice(索引，1)
}
},
计算值：{
totalNum(){
返回此3 .书籍.长度
}
},
//自定义局部指令
指令：{
焦点：{
已插入(el){
//自动聚焦
焦点()
}
}
},
//监视图书是否存在
观察：{
名称：{
深：真的，
处理器(瓦尔){
const book=this。书籍。查找((书)={
返回book.name===val
});
如果（书){
this.subFlag=true
}否则{
this.subFlag=false
}
}
}
}
}
/脚本
style type=text/css 。网格{
边距：自动；
宽度：530像素
文本对齐：居中；
}。网格表{
border-top:1px solid # c2d 89 a；
宽度：100%;
边框-塌陷：塌陷；
}。网格th，td {
填充：10px
边框：1px虚线# F3DCAB
高度：35px
行高：35px
}。网格th {
背景色：# F3DCAB
}。网格。书{
填充-底部：10px
垫顶：5px
背景色：# F3DCAB
}。网格。总计{
高度：30px
行高：30px
背景色：# F3DCAB
border-top:1px solid # c2d 89 a；
}
/风格
过滤器文件索引。射流研究…
从“vue”导入某视频剪辑软件
从"日期-fns/格式"导入格式
//自定义过滤器
Vue.filter(日期格式，函数(value，formatStr= yyyy-MM-DD HH:MM:ss ){
返回格式（值，格式字符串)
});
主页。射流研究…引入
"导入"。/筛选器
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。