Vue實現圖書管理案例
阿新 • • 發佈:2021-01-21
本文例項為大家分享了Vue實現圖書管理的具體程式碼,供大家參考,具體內容如下
案例效果
案例思路
1、圖書列表
- 實現靜態列表效果
- 基於資料實現模板效果
- 處理每行的操作按鈕
2、新增圖書
- 實現表單的靜態效果
- 新增圖書表單域資料繫結
- 新增按鈕事件繫結
- 實現新增業務邏輯
3、修改圖書
- 修改資訊填充到表單
- 修改後重新提交到表單
- 重用新增和修改方法
4、刪除圖書
- 刪除按鈕繫結時間處理方法
- 實現刪除業務邏輯
5、常用特性應用場景
- 過濾器(格式化日期)
- 自定義指令(獲取表單焦點)
- 計算屬性(統計圖書數量)
- 偵聽器(驗證圖書和編號的存在性)
- 生命週期(圖書資料處理)
程式碼
基本樣式
<style type="text/css"> .grid { margin: auto; width: 550px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed orange; height: 35px; } .grid th { background-color: orange; } .grid .book { width: 550px; padding-bottom: 10px; padding-top: 5px; background-color: lawngreen; } .grid .total { height: 30px; line-height: 30px; background-color: lawngreen; border-top: 1px solid orange; } </style>
靜態佈局
<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; this.data = ''; this.books.push(book); } // 清空表單 this.id = ''; this.name = ''; },toEdit: function (id) { // 禁止修改id this.flag = true; // 根據id查詢出要編輯的資料 var book = this.books.filter(function (item) { return item.id == id; }); console.log(book) // 把獲取到的id提交到表單 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) // ----------------- // 方法2 通過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: 252597867777 },{ id: 2,name: '水滸傳',date: 564634563453 },{ id: 3,name: '紅樓夢',date: 345435345343 },{ id: 4,name: '西遊記',date: 345345346533 }] this.books = data } }); </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。