vue-demo2-图书管理 野性酷女 2021-08-13 20:44 239阅读 0赞 **用到的vue常用特性预览** * 表单操作 * 自定义指令 * 计算属性 * 侦听器 * 过滤器 * 生命周期 ##### 图书管理原始html ##### <div id="app"> <div class="grid"> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>三国演义</td> <td>时间</td> <td>操作</td> </tr> <tr> <td>1</td> <td>三国演义</td> <td>时间</td> <td>操作</td> </tr> <tr> <td>1</td> <td>三国演义</td> <td>时间</td> <td>操作</td> </tr> <tr> <td>1</td> <td>三国演义</td> <td>时间</td> <td>操作</td> </tr> </thead> </table> </div> </div> 图书管理css <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .grid th, td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: orange; } </style> 提供的数据 books: [{ id: 1, name: '三国演义', date: '' }, { id: 2, name: '水浒传', date: '' }, { id: 3, name: '红楼梦', date: '' }, { id: 4, name: '西游记', date: '' }] 基本效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70] 下面使用vue重构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .grid th, td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: orange; } .grid .book { background-color: orange; padding-top: 20px; } </style> </head> <body> <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.prevent="add()">提交</button> </div> <!-- 计算属性,计算图书的总数 :就是books数组的长度--> <div class="total"> <span>图书总数</span> <span v-text='total'></span> </div> </div> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> <!-- 通过循环,将数据渲染到页面 --> <tr :key='item.id' v-for="(item,index) in books"> <td v-text='item.id'></td> <td v-text='item.name'>三国演义</td> <td v-text='item.date '></td> <!-- 时间过滤器没有研究明白 --> <!-- <td v-text='item.date| format(" yyyy-MM-dd hh:mm:ss ") '></td> --> <td> <a href="" @click.prevent='modify(item.id)'>修改</a> <span> | </span> <!-- 注意:删除名不能用delete,因为是关键字 --> <a href="" @click.prevent='del(item.id)'>删除</a> </td> </tr> </thead> </table> </div> </div> <script type="text/javascript" src="../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: { id: ' ', name: ' ', data: ' ', flag: false, books: [{ id: 1, name: '三国演义 ', date: 2525609975000 }, { id: 2, name: '水浒传 ', date: 2525609975000 }, { id: 3, name: '红楼梦 ', date: 2525609975000 }, { id: 4, name: '西游记 ', date: 2525609975000 }] }, methods: { // 删除图书:根据id找出对应图书列表的索引 del: function(id) { var index = this.books.findIndex(item => { return item.id == id }) this.books.splice(index, 1) }, // 添加图书+修改图书时的编辑 // 通过flag来判断当前是添加还是修改时的编辑,复用添加方法 add: function() { if (this.flag) { // 如果为真,禁用id输入框,为修改图书的编辑功能 // 根据id跟新数组中的数据 this.books.some(item => { if (item.id == this.id) { item.name = this.name // 跟新完成后, 终止循环 return true } }) // 编辑完表单, 要改变输入框禁用属性 this.flag = false } else { this.books.push({ id: this.id, name: this.name }) this.id = '' this.name = '' } this.id = '' this.name = '' }, // 修改图书:先将要修改的数据展示在编辑页 modify: function(id) { // 点击修改的时候,将状态改为禁止 this.flag = true console.log(id); // 根据传来的id,查出对应的图书信息 var book = this.books.filter(item => { return item.id == id }) console.log(book); this.id = book[0].id this.name = book[0].name // 下一步开始编辑,但是编辑的时候,当前的图书id不能修改,所以禁用id输入框 // 当然,也可以根据id输入框的状态,来判断是修改状态下的编辑,还是增加状态下的编辑 } }, // 局部定义的过滤器,自定义指令,都需要一个返回值.而且在html处是属性,在vue实例是方法, // 所以此属性不能在vue实例的data中初始化 computed: { total: function() { return this.books.length; } }, }); </script> </body> </html> **要点说明** * 通过v-for进行数据循环,将数据填充到页面 * 添加操作:用到的是push方法,通过属性,属性值的方式来添加,所以push方法里面用了对象\{id:this.id,name:this.name\} 这里的this指的是vue,也就是vue监听到的最新的id,name * 数据的修改分两步1:将要修改的数据展示在输入框2:进行数据的修改(修改的时候,id值是禁止修改的) \-1:将数据展示在输入框:为修改按钮绑定事件,并且传入id,在事件中利用filter(),来查找id对应的图书信息,得到的是一个数组,然后将数组的第0个索引的值,依次赋值给当前的id,当前的name ![在这里插入图片描述][20191203221050350.png] \-2:利用修改状态下,禁止输入框输入这个条件,实现添加功能的复用 在添加功能里面,用if else 来判断禁用框的状态 进入修改数据的条件后,利用some(),根据id更新数组中的数据 在编辑完后,将输入框的状态变为非禁用 亲空编辑输入框的数据 * 删除操作:利用findIndex()根据id找到对应图书的索引,利用splice()来删除数据 * 利用计算属性,计算图书的总量,其实就是books数组的长度 * 定义全局指令(实现自动聚焦),全局过滤器(格式化时间,暂时没有实现) 效果展示 ![在这里插入图片描述][20191203222246435.gif] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/d434d3a5912448418806d746b1a8cca2.png [20191203221050350.png]: /images/20210813/f6d8cabda02548c4a2425f72bcbb35e3.png [20191203222246435.gif]: /images/20210813/020475b7813c45d09a8d483ccbe94b8b.png
还没有评论,来说两句吧...