vue图书管理 demo

效果图

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.grid {margin: auto;width: 500px;text-align: center;}.grid table {width: 100%;border-collapse: collapse;}.grid th,td {padding: 10;border: 1px dashed pink;height: 35px;line-height: 35px;}.grid th {background-color: pink;}.book{background: pink;padding:5px;border-bottom:1px double green;}.total{width: 100%;height: 30px;line-height: 30px;background:hotpink;border-bottom: 1px solid green;}</style></head><body><div id="app"><div class="grid"><div><h1>图书管理</h1><div class="book"><div><label for="id">编号：</label> <input type="text" id="id" v-focus v-model.number="order" :disabled="flag"> <label for="name">名称：</label> <input type="text" id="name" v-model="uname"> <button @click="submit" :disabled="submitFlag">提交</button></div></div></div><div class="total"><span>图书总数</span>{{total}}</div><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in books" :key='item.id'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date | format("yyyy-MM-dd hh:mm:ss")}}</td><td><a href="" @click.prevent='editTxt(item.id)'>修改</a><a href="" @click.prevent='del(item.id)'>删除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*图书管理-图书列表展示功能注意事项：<a href="" @click.prevent>修改</a>事件绑定时，可以只添加修饰符，而不绑定事件函数*/Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);})var vm = new Vue({el: '#app',data: {order:'',uname:'',submitFlag:false,//提交按钮是否可点击flag:false,//id是否可更改 判断是添加还是修改books : []},// 自定义局部指令directives:{//自定义局部指令  获取焦点focus:{inserted:function(el){el.focus();}}},// 方法methods:{submit(){//添加图书  编辑图书if(this.flag){// 编辑图书// 就是根据当前的ID去更新数组中对应的数据// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。this.books.some((item) => {if(item.id == this.order) {item.date= +new Date();item.name = this.uname;// 完成更新操作之后，需要终止循环return true;}});this.flag = false;}else{// 添加图书if(this.order!='' && this.uname!=''){let book={};book.id=this.order;book.name=this.uname;book.date= +new Date();this.books.push(book);}else{alert("请补全填写图书信息");}}// 清空表单this.order='';this.uname='';},editTxt(id){//修改图书this.flag=true;//获取图书var book=this.books.filter(function(item){return item.id==id;});this.order=book[0].id;this.uname=book[0].name;},del(id){//删除图书//方法一： 通过filter()方法进行删除// this.books=this.books.filter(function(item){//   return item.id != id;// })// 方法二：根据id从数组中找到元素的索引 通过 splice()方法删除var index=this.books.findIndex(function(item){return item.id==id;})this.books.splice(index,1)},test(val){console.log(val);//监听的值let flag = this.books.some(function(item){console.log(item);//监听数组中的每个对象return item.name == val;})    if(flag){// 存在this.submitFlag=true;}else{this.submitFlag=false;}},},// 计算属性computed:{total:function(){return this.books.length;}},// 侦听  watch:{// 验证图书是否存在uname:function(val){this.test(val);},},// 该生命周期钩子函数被触发的时候 模板已经可以使用了// 一般此时用于获取后台数据 然后把数据填充到模板mounted:function(){var data=[{id: 1,name: '三国演义',date: 2525609975000},{id: 2,name: '水浒传',date: 2525609975000},{id: 3,name: '红楼梦',date: 2525609975000},{id: 4,name: '西游记',date: 2525609975000}];this.books=data;}});</script></body>
</html>

vue图书管理 demo相关推荐

Vue 图书管理案例
这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值, 感兴趣的小伙伴们可以参考一下 <!DOCTYPE html> <html lang="en& ...
图书管理demo（课程小作业，较简单）
图书管理(纯java控制台,无后端前端) 使用java基础制作一个简单系统实现以下功能: 自己花了40分钟写了一下,比较简单,但是没怎么使用面向对象的优势,就单纯的基础. 附上代码: ```java ...
【Java图书馆系统app】基于Vue+Vant+SSM图书管理系统设计
源码地址:[Java图书馆系统app]基于Vue+Vant+SSM图书管理系统设计.zip_java条码管理系统-Android文档类资源-CSDN下载具体运行截图见项目说明:https://blog ...
vue权限管理的设计与实现
一.什么是权限管理在web应用中权限管理,一般指根据系统设置和分配给某个角色的应用权限,用户可以访问而且只能访问自己被分配的资源.权限管理几乎出现在任何系统里面,在web后台管理系统里面尤为常见. ...
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
Vue前后端交互实现图书管理功能
源码链接:https://pan.baidu.com/s/1MzN9Jcrz-OLv7GVklK7UXQ 提取码:36qe 初始化项目: npm init -y 安装相应的第三方模块: npm ins ...
使用vue实现简单的图书管理
这个小案例巩固了vue的基础知识,主要涉及了各种指令的操作,自定义指令.生命周期.侦听器.过滤器.计算属性等的实践.完成的功能有对图书的增删改和统计图书的总量. 功能介绍: 添加图书:输入编号和名称点 ...
vue实现图书管理案例
需求: 1. 动态在页面中展示图书列表: 2. 在输入框中输入图书名称,按回车键实现图书添加功能(图书名称不能为空): 3. 点击"删除&qu ...
vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...

vue图书管理 demo

vue图书管理 demo相关推荐

最新文章

热门文章