<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .grid{ margin: auto; width: 500px; text-align: center; } .grid table{ width: 100%; border-collapse: collapse; /*margin: 0 auto;*/ } .grid th,td{ padding: 10px; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th{ background-color: orange; } .grid .book{ padding-bottom: 10px; padding-top: 5px; background-color: antiquewhite; } </style> </head> <body> <!-- 1.建立表格--> <!-- 2.添加图书--> <!-- ·实现表单的静态效果--> <!-- ·添加图书表单域数据绑定--> <!-- ·添加按钮事件绑定--> <!-- ·实现添加业务逻辑--> <!-- 3.修改图书--> <!-- ·修改信息填充到表单--> <!-- ·修改后重新提交表单--> <!-- ·重用添加和修改的方法--> <!-- 4.删除图书--> <!-- ·删除按钮绑定事件处理方法--> <!-- ·实现删除业务逻辑--> <div id="app"> <div class="grid"> <div class="book"> <h1>图书管理系统</h1> <div> <label for="id" >编号:</label> <input type="text" id="id" v-model="id" :disabled="flag"> <label for="name" >名称:</label> <input type="text" id="name" v-model="name"> <input type="button" value="提交" @click="handle"> </div> </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> <!-- <tr>--> <!-- <td>1</td>--> <!-- <td>红楼梦</td>--> <!-- <td>2018</td>--> <!-- <td>编号</td>--> <!-- </tr>--> <!-- <tr>--> <!-- <td>1</td>--> <!-- <td>红楼梦</td>--> <!-- <td>2018</td>--> <!-- <td>操作</td>--> <!-- </tr>--> <!-- <tr>--> <!-- <td>1</td>--> <!-- <td>红楼梦</td>--> <!-- <td>2018</td>--> <!-- <td>操作</td>--> <!-- </tr>--> </tbody> </table> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> 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, id:'', name:'', // date:new date(), books:[{ id:'1', name:'西游记', date:'20210405085807' },{ id:'2', name:'大话西游', date:'20210405085807' },{ id:'3', name:'红楼梦', date:'20210405085807' }] }, methods: { handle: function () { if (this.flag) { //编辑操作 //根据当前的id去更新数组中对应的数据 //箭头函数this定义的是父级的this,这里的父级就是handle 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 //this.id表单中的Id book.name = this.name book.date = '' this.books.push(book); //清空表单 this.id = '' this.name = '' } this.id='' this.name='' }, toEdit: function (id) { //禁止修改id this.flag = true // console.log(id) //根据id查询出要编辑的数据 //借助数组的api 过滤出我们需要的数据 var book = this.books.filter(function (item) { return item.id == id }) //把获取到的信息填充到表单 this.id = book[0].id this.name = book[0].name }, deleteBook:function (id) { // var index = this.books.findIndex(function (item) { // return item.id == id // }); // this.books.splice(index,1) //-------------- //方法二通过filter方法 this.books=this.books.filter(function (item) { return item.id !=id }) } } }) </script> </body> </html>
老师,我的date出不来,是哪里有问题吗?
截图:
我知道为啥了,我给date的对象加了 ' '
可我的 id对象也加了 ' '
怎么id就出来了
我想问什么时候加' ',什么时候不加呢,经常在细节上出问题。
这个东西是看你做的这个项目的数据的。