<!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出不来，是哪里有问题吗？
截图：
为啥 =用不了嘞？
还有就是index.vue文件中首页、发现等页面的地址为啥有/还有/find呢，我是这么理解的，但是感觉这样又不对，他们不是同级目录吗？如图：
京公网安备 11011402011233号