电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue實現圖書管理案例

瀏覽:3日期:2022-10-10 11:53:22

本文實例為大家分享了Vue實現圖書管理的具體代碼,供大家參考,具體內容如下

案例效果

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.hdgsjgj.cn/bcjs/10411.html' @click.prevent=’toEdit(item.id)’>修改</a> <span>|</span> <a href='http://www.hdgsjgj.cn/bcjs/10411.html' @click.prevent=’deleteBook(item.id)’>刪除</a> </td> </tr></tbody> </table> </div></div>

效果實現

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

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

標簽: Vue
相關文章:
主站蜘蛛池模板: ET3000双钳形接地电阻测试仪_ZSR10A直流_SXJS-IV智能_SX-9000全自动油介质损耗测试仪-上海康登 | 美国HASKEL增压泵-伊莱科elettrotec流量开关-上海方未机械设备有限公司 | 上海办公室装修,写字楼装修—启鸣装饰设计工程有限公司 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | 专注提供国外机电设备及配件-工业控制领域一站式服务商-深圳市华联欧国际贸易有限公司 | 气象监测系统_气象传感器_微型气象仪_气象环境监测仪-山东风途物联网 | 成都竞价托管_抖音代运营_网站建设_成都SEM外包-成都智网创联网络科技有限公司 | 污水处理设备-海普欧环保集团有限公司 | 雷冲击高压发生器-水内冷直流高压发生器-串联谐振分压器-武汉特高压电力科技有限公司 | 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | 铝镁锰板_铝镁锰合金板_铝镁锰板厂家_铝镁锰金属屋面板_安徽建科 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 丹佛斯压力传感器,WISE温度传感器,WISE压力开关,丹佛斯温度开关-上海力笙工业设备有限公司 | 上海办公室设计_办公楼,写字楼装修_办公室装修公司-匠御设计 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 油漆辅料厂家_阴阳脚线_艺术漆厂家_内外墙涂料施工_乳胶漆专用防霉腻子粉_轻质粉刷石膏-魔法涂涂 | 北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司 | 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业(北京)流体设备有限公司 | 杭州代理记账多少钱-注册公司代办-公司注销流程及费用-杭州福道财务管理咨询有限公司 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 北京公积金代办/租房发票/租房备案-北京金鼎源公积金提取服务中心 | 泰州物流公司_泰州货运公司_泰州物流专线-东鑫物流公司 | 华东师范大学在职研究生招生网_在职研究生招生联展网 | 全自动不干胶贴标机_套标机-上海今昂贴标机生产厂家 | 东莞喷砂机-喷砂机-喷砂机配件-喷砂器材-喷砂加工-东莞市协帆喷砂机械设备有限公司 | 希望影视-高清影视vip热播电影电视剧免费在线抢先看 | 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 灰板纸、灰底白、硬纸板等纸品生产商-金泊纸业 | 平面钻,法兰钻,三维钻-山东兴田阳光智能装备股份有限公司 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 并离网逆变器_高频UPS电源定制_户用储能光伏逆变器厂家-深圳市索克新能源 | 杭州代理记账多少钱-注册公司代办-公司注销流程及费用-杭州福道财务管理咨询有限公司 | 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 塑木弯曲试验机_铜带拉伸强度试验机_拉压力测试台-倾技百科 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 |