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

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

Vue實現圖書管理案例

瀏覽:2日期: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
相關文章:
主站蜘蛛池模板: 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 贝壳粉涂料-内墙腻子-外墙腻子-山东巨野七彩贝壳漆业中心 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 酒糟烘干机-豆渣烘干机-薯渣烘干机-糟渣烘干设备厂家-焦作市真节能环保设备科技有限公司 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 陕西安玻璃自动感应门-自动重叠门-磁悬浮平开门厂家【捷申达门业】 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 岛津二手液相色谱仪,岛津10A液相,安捷伦二手液相,安捷伦1100液相-杭州森尼欧科学仪器有限公司 | 汽液过滤网厂家_安平县银锐丝网有限公司 | 金属清洗剂,防锈油,切削液,磨削液-青岛朗力防锈材料有限公司 | 北京翻译公司_同传翻译_字幕翻译_合同翻译_英语陪同翻译_影视翻译_翻译盖章-译铭信息 | 东莞喷砂机-喷砂机-喷砂机配件-喷砂器材-喷砂加工-东莞市协帆喷砂机械设备有限公司 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 色油机-色母机-失重|称重式混料机-称重机-米重机-拌料机-[东莞同锐机械]精密计量科技制造商 | 四探针电阻率测试仪-振实密度仪-粉末流动性测定仪-宁波瑞柯微智能 | 臭氧灭菌箱-油桶加热箱-原料桶加热融化烘箱-南京腾阳干燥设备厂 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 环比机械| 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 福州时代广告制作装饰有限公司-福州广告公司广告牌制作,福州展厅文化墙广告设计, | 超声波_清洗机_超声波清洗机专业生产厂家-深圳市好顺超声设备有限公司 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 散热器-电子散热器-型材散热器-电源散热片-镇江新区宏图电子散热片厂家 | 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 齿轮减速机电机一体机_齿轮减速箱加电机一体化-德国BOSERL蜗轮蜗杆减速机电机生产厂家 | 软文推广发布平台_新闻稿件自助发布_媒体邀约-澜媒宝 | 成都装修公司-成都装修设计公司推荐-成都朗煜装饰公司 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | 连栋温室大棚建造厂家-智能玻璃温室-薄膜温室_青州市亿诚农业科技 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 动物麻醉机-数显脑立体定位仪-北京易则佳科技有限公司 | 尾轮组_头轮组_矿用刮板_厢式刮板机_铸石刮板机厂家-双驰机械 | 坏男孩影院-提供最新电影_动漫_综艺_电视剧_迅雷免费电影最新观看 | 小港信息港-鹤壁信息港 鹤壁老百姓便民生活信息网站 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 |