vue實現圖書管理
阿新 • • 發佈：2021-08-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <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: 10; 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> </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-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="js/vue.js"></script> <script type="text/javascript"> /* 圖書管理-新增圖書 */ Vue.directive('focus', { inserted: function (el) { el.focus(); } }); 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: { flag: false, submitFlag: false, id: '', name: '', books: [] }, methods: { handle: function(){ if(this.flag) { // 編輯圖書 // 就是根據當前的ID去更新陣列中對應的資料 this.books.some((item) => { if(item.id == this.id) { item.name = this.name; // 完成更新操作之後，需要終止迴圈 return true; } }); this.flag = false; }else{ // 新增圖書 var book = {}; book.id = this.id; book.name = this.name; book.date = 2525609975000; this.books.push(book); // 清空表單 this.id = ''; this.name = ''; } // 清空表單 this.id = ''; this.name = ''; }, toEdit: function(id){ // 禁止修改ID this.flag = true; console.log(id) // 根據ID查詢出要編輯的資料 var book = this.books.filter(function(item){ return item.id == id; }); console.log(book) // 把獲取到的資訊填充到表單 this.id = book[0].id; this.name = book[0].name; }, 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; }); } }, computed: { total: function(){ // 計算圖書的總數 return this.books.length; } }, watch: { name: function(val) { // 驗證圖書名稱是否已經存在 var flag = this.books.some(function(item){ return item.name == val; }); if(flag) { // 圖書名稱存在 this.submitFlag = true; }else{ // 圖書名稱不存在 this.submitFlag = false; } } }, 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>