本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
回答者卡特·佩基(Carter Page),谷歌(Google)工程经理 我的答案很短,但是...
什么是Flyway 转载: https://blog.waterstrong.me/flyway-in-practice/ Flyway ...
本文转载自微信公众号「Java极客技术」,作者鸭血粉丝 。转载本文请联系Java极客...
1 HTML介绍 1.1 代码初体验,制作第一个网页 XML/HTML Code 复制内容到剪贴板 !D...
通过ImageMagickObject的identify获取图片的信息,在命令行下好用,但是放到程序...
正则表达式是一类用于匹配文本的表达方式,常用于grep命令中表达检索条件。其实...
3 月 3 日消息 太阳谷更新将是 Windows 10 的大事件,现在这一点终于得到了微软...
本文所举的例子与保存HTML格式数据至XML类似。在以往当表格被提交后,我们通常会...
并发处理如何实现 在这个使用框架开发的程序中,面板的开发者可以将经历集中到如...
不用程序员操心的堆 —托管堆 程序在计算机上跑着,就难免会占用内存资源来存储...