带数据存储
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="wrap">
<div class="container">
<table class="table table-bordered table-hover">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in infoList">
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.sex}}</td>
<td>
<button class="btn btn-danger" @click="dele(index)">删除</button>
<button class="btn btn-info" @click="alter(index)">修改</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-center"><button class="btn btn-warning" type="button" @click="addshow">增加</button></td>
</tr>
</table>
<hr />
<form v-if="isShow">
<h3>登记信息</h3>
<div class="form-group">
<input type="text" placeholder="请输入id" class="form-control" v-model="id"/>
</div>
<div class="form-group">
<input type="text" placeholder="请输入姓名" class="form-control" v-model="username"/>
</div>
<div class="form-group">
<input type="text" placeholder="请输入性别" class="form-control" v-model="sex"/>
</div>
<div class="form-group">
<button class="btn btn-warning" type="button" @click="addInfo">增加</button>
</div>
</form>
<form v-else>
<h3>更改信息</h3>
<div class="form-group">
<input type="text" placeholder="请输入id" class="form-control" v-model="oldid"/>
</div>
<div class="form-group">
<input type="text" placeholder="请输入姓名" class="form-control" v-model="oldname"/>
</div>
<div class="form-group">
<input type="text" placeholder="请输入性别" class="form-control" v-model="oldsex"/>
</div>
<div class="form-group">
<button class="btn btn-info" type="button" @click="updateInfo">更改</button>
</div>
</form>
</div>
</div>
<script>
var vm=new Vue({
el:"#wrap",
data:{
// infoList:[
// {id:1,username:"王刚",sex:"男"},
// {id:2,username:"周游",sex:"男"},
// {id:3,username:"金铭",sex:"女"}
// ],
infoList:JSON.parse(localStorage.getItem("newArr")) || [],
id:"",
username:"",
sex:"",
isShow:true,
oldid:"",
oldname:"",
oldsex:"",
selected:""
},
methods:{
addInfo:function(){
var obj={
id:this.id,
username:this.username,
sex:this.sex
}
for (var i=0;i<this.infoList.length;i++) {
if(this.infoList[i].id == obj.id){
alert('有重复')
return
}
}
this.infoList.push(obj)
localStorage.setItem("newArr",JSON.stringify(this.infoList))
this.id=""
this.username=""
this.sex=""
},
dele:function(index){
this.infoList.splice(index,1)
localStorage.setItem("newArr",JSON.stringify(this.infoList))
},
alter:function(index){
this.isShow=false
this.oldid=this.infoList[index].id
this.oldname=this.infoList[index].username
this.oldsex=this.infoList[index].sex
this.selected=this.infoList[index]
},
addshow:function(){
this.isShow=true
},
updateInfo:function(){
// console.log(this.selected)
this.selected.id=this.oldid
this.selected.username=this.oldname
this.selected.sex=this.oldsex
this.oldid=""
this.oldname=""
this.oldsex=""
localStorage.setItem("newArr",JSON.stringify(this.infoList))
}
}
})
</script>
</body>
</html>