今天是学习vue的第二天，通过对vue指令和vue计算属性以及过滤器做一个学生管理系统的demo来巩固自己学习的内容。感觉还不错，又是进步的一天，喔喔喔~~!
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<script src="vue.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#app{
margin: 100px 100px;
}
table{
margin-top: 10px;
width: 100%;
background-color: #000000;
}
input{
-web-kit-appearance:none;
-moz-appearance: none;
border-spacing: 2px 4px;
border: solid 1px deepskyblue;
border-radius: 2px;
font-size:15px;
height:2em;
border:1px solid #c8cccf;
color:#6a6f77;
}
table tr{
background-color: #fff;
}
table tr td{
padding: 0px 3px;
}
table tr td:last-child{
text-align: center;
padding: 2px 5px;
}
table tr td a{
font-size: 12px;
/*text-decoration: none;*/
color: dodgerblue;
}
form{
display: flex;
}
form input{
margin-right: 15px;
}
input[type="button"]{
border-radius: 2px;
border: solid 1px skyblue;
padding: 2px 15px;
}
th{
border-spacing: 2px ;
font-style: normal;
font-size: 16px;
color: dodgerblue;
font-weight: normal;
}
</style>
<body>
<div id="app">
<form v-show="isShow">
<input type="number" placeholder="请输入序号" v-model="person.id">
<input type="text" placeholder="请输入姓名" v-model="person.name">
<input type="number" placeholder="请输入年龄" v-model="person.age">
<input type="button" @click="add" value="新增"></input>
<input type="button" @click="query" value="查询"></input>
</form>
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>当前时间</th>
<th>操作</th>
</tr>
<tr v-for="(person,index) in persons">
<td><input v-model="person.id" :disabled="isDisabled"></td>
<td><input v-model="person.name" :disabled="isDisabled"></td>
<td><input v-model="person.age" :disabled="isDisabled"></td>
<td><input :value="time|dateFormat('YYYY-MM-DD')" :disabled="true"></td>
<td>
<a href="#" @click.prevent="edit">编辑</a>
<a href="#" @click.prevet="deleteinfo(index)">删除</a>
<br>
<a href="#" @click.prevent="togglemore">更多操作</a>
</td>
</tr>
</table>
</div>
<script>
Vue.filter("dateFormat",function (value,fmtStr){
let time=new Date(value);
let year=time.getFullYear()+"";
let month=time.getMonth()+1+"";
let day=time.getDay()+"";
let hours=time.getHours()+"";
let minutes=time.getMinutes()+"";
let seconds=time.getSeconds()+"";
if (fmtStr==="YYYY-MM-DD"&&fmtStr){
return `${year}-${month.padStart(2,"0")}-${day.padStart(2,"0")}`
}else{
return `${year}-${month.padStart(2,"0")}-${day.padStart(2,"0")} ${hours.padStart(2,"0")}:${minutes.padStart(2,"0")}:${seconds.padStart(2,"0")}`
}
})
let vue=new Vue(
{
el:"#app",
data:{
isShow:false,
isDisabled:true,
persons:[
{id:1,name:'shanjialan1111',age:"19"},
{id:2,name:'shanjialan2222',age:"20"},
{id:3,name:'shanjialan3333',age:"21"},
{id:4,name:'shanjialan4444',age:"22"},
],
person:{id:"",name:"",age:""},
time:Date.now()
},
methods:{
edit(){
this.isDisabled=false;
},
deleteinfo(index){
this.persons.splice(index, 1);
},
togglemore() {
this.isShow=!this.isShow;
},
add(){
this.person.time=Date.now();
this.persons.push(this.person);
},
query(){
let newPerson=[];
newPersons=this.persons.filter((person)=>{
if (this.person.age === person.age){
return true;
}
});
this.persons=newPersons;
}
}
}
)
</script>
</body>
</html>
运行结果如下：
1.初始状态
初始状态.png
2.增添
增添.png
3.编辑
编辑.png
4.删除
删除.png
5.查询
查询.png
