<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>00_复习</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<div id="app">
<div>
<input type="text" placeholder="请输入学号" v-model="id"><input type="text" placeholder="请输入姓名" v-model="name"><button class="btn btn-primary" @click="add">添加</button>
</div>
<table class="table table-bordered table-striped tale-hover">
<thead>
<tr>
<td>
学号
</td>
<td>
姓名
</td>
<td>
生日
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
<tr v-for="i in products">
<td>
{{i.id}}
</td>
<td>
{{i.name}}
</td>
<td>
{{i.birthday|formatDate}}
</td>
<td>
<button class="btn btn-danger" @click="del(i.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter('formatDate',data =>{
if(data==null||data==''){
return '';
}
var date =new Date(data);
var dateStr = data.getFullYear()+'-'+(data.getMonth()+1)+'-' + date.getDate();;
return dateStr;
})
var vm = new Vue({
el:'#app',
data:{
products:[
{
'id':1,
'name':'llh',
},
],
name:null,
id:null,
birthday:null
},
//反序列化
created() {
this.products=JSON.parse(localStorage.getItem("products")||'[]');
},
methods:{
add(){
var product = {
id:this.id,
name:this.name,
birthday:new Date()
};
this.products.push(product);
//localStorage只能存字符串,所以我们想把products存进去的话就需要序列化
//序列化!!!!!!!!!!!!!
localStorage.setItem("products",JSON.stringify(this.products));
},
del(id){
//箭头函数中的this就是其外部函数的this
this.products.some((data,index) =>{
if(id==data.id)
{
this.products.splice(index,1);
return true;
}
});
localStorage.setItem("products",JSON.stringify(this.products));
},
},
});
</script>
</body>
</html>
小测试
最新推荐文章于 2023-02-15 18:58:37 发布
2159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
