Vue實現圖書管理小案例
阿新 • • 發佈:2020-12-04
本文例項為大家分享了Vue實現圖書管理的具體程式碼,供大家參考,具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> .grid{ margin:auto; width:500px; text-align:center; } .grid table{ width:100%; border-collapse:collapse; } .grid th,td{ padding:10px; border:1px solid orange; height:35px; line-height:35px; } .grid th{ background-color:orange; } .book{ background-color:orange; border-bottom:1px solid #ccc; padding:5px; } input{ width:150px; outline:none; } .grid .total{ height:30px; line-height:30px; background-color:orange; border-bottom:1px solid #ccc; } </style> </head> <body> <div id="app"> <div class="grid"> <div> <h1>圖書管理</h1> <div class="book"> <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 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> <script src="js/vue.js"></script> <script> //自定義指令 Vue.directive('focus',{ inserted:function(el){ el.focus(); } }) //過濾器(格式化日期) Vue.filter('format',function(value,arg) { function dataFormat(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 dataFormat(value,arg); }) var vm=new Vue({ el:'#app',data:{ flag:false,submitFlag:false,id:'',name:'',books:[] },methods:{ handle:function(){ if(this.flag){ //修改操作:就是根據當前的id去更新陣列中對應的資料 //箭頭函式的this不是window //some方法判斷什麼時候終止迴圈 this.books.some((item)=>{ if(item.id==this.id){ item.name=item.name; //完成更新操作之後,要終止迴圈 return true; } }); this.flag=false; }else{ //新增操作 //新增圖書 var book={}; book.id=this.id; book.name=this.name; book.date=new Date(); this.books.push(book); } //清空表單 this.id=''; this.name=''; },//handle結束 toEdit:function(id){ //禁止修改id this.flag=true; //根據id查詢出要編輯的資料 var book=this.books.filter(function(item){ return item.id==id; }); //把獲取的資訊填充到表單 this.id=book[0].id; this.name=book[0].name; },//toEdit結束 deleteBook:function(id){ //刪除圖書 //根據id從陣列中查詢元素的索引 var index=this.books.findIndex(function(item){ return item.id==id; }); //根據索引刪除陣列元素 this.books.splice(index,1); //方法二:通過filter方法進行刪除 //this.books=this.books.filter(function(item){ //return item.id!=id; //}); }//deleteBook結束 },computed:{ total:function(){ //計算圖書的總數 return this.books.length; } },//computed結束 watch:{ name:function(val){ //驗證圖書名稱是否已經存在 var flag=this.books.some(function(item){ return item.name==val; }); if(flag){ //圖書名稱存在 this.submitFlag=true; }else{ this.submitFlag=false; } } },//watch結束 mounted:function(){ //該生命週期鉤子函式被觸發的時候,模板已經可以使用 //一般用於獲取後臺資料,然後把資料填充到模板 //模擬介面 var data=[{ id:1,name:'三國演義',date:1585609975000 },{ id:2,name:'水滸傳',date:1586609975000 },{ id:3,name:'紅樓夢',date:1587609975000 },{ id:4,name:'西遊記',date:1588609975000 }]; this.books=data; } }); </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。