本文實例為大家分享了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' 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='http://www.leifengta.com.cn/bcjs/10411.html' @click.prevent=’toEdit(item.id)’>修改</a> <span>|</span> <a href='http://www.leifengta.com.cn/bcjs/10411.html' @click.prevent=’deleteBook(item.id)’>刪除</a> </td> </tr></tbody> </table> </div></div>

效果實現

<script type='text/javascript' src='http://www.leifengta.com.cn/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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。