需求:
利用Vue指令编写一个简单的学生管理系统。
要求： 能够展示学生信息, 能够对学生信息进行增删改查
效果：
image
代码：
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 800px;
margin: 50px auto;
}
table{
width: 100%;
background: #000;
}
table tr{
background: #fff;
}
table tr input{
width: 100%;
height: 42px;
text-align: center;
}
form{
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
}
p{
text-align: center;
font-size: 30px;
margin-bottom: 50px;
}
.operate{
width: 100px;
height: 100%;
text-align: center;
}
.operate a{
text-decoration: none;
}
.operate a:first-child{
margin-right: 5px;
}
</style>
<div id="app">
<p>学生信息管理系统</p>
<form v-show="isShow">
<input type="text" placeholder="请输入序号" v-model="person.id">
<input type="text" placeholder="请输入姓名" v-model="person.name">
<input type="text" placeholder="请输入分数" v-model="person.score">
<input type="submit" value="增加" @click.prevent="add">
<input type="submit" value="查询" @click.prevent="query">
</form>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>分数</th>
<th>时间</th>
<th>操作</th>
</tr>
<!--利用v-for指令动态生成学生信息-->
<tr v-for="(person, index) in persons">
<td><input type="text" v-model="person.id" :disabled="isDisabled"></td>
<td><input type="text" v-model="person.name" :disabled="isDisabled"></td>
<td><input type="text" v-model="person.score" :disabled="isDisabled"></td>
<td><input type="text" :value="person.time | dateFormart" disabled></td>
<td class="operate">
<a href="#" @click.prevent="edit">编辑</a>
<a href="#" @click.prevent="del(index)">删除</a>
<br>
<a href="#" @click.prevent="toggle">更多操作</a>
</td>
</tr>
</table>
</div>
<script>
// 格式化时间
Vue.filter('dateFormart', function (value, fmstr) {
let date = new Date(value);
let year = date.getFullYear();
let month = date.getMonth() + 1 + '';
let day = date.getDate() + '';
let hour = date.getHours() + '';
let minute = date.getMinutes() + '';
let second = date.getSeconds() + '';
// 如果传入的时间格式是yyyy-MM-dd, 就只显示年-月-日
if (fmstr && fmstr === 'yyyy-MM-dd'){
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
}
// 否则就显示年-月-日 时:分:秒
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`;
});
new Vue({
el: '#app',
data: {
isDisabled: true,
isShow: false,
// 存放学生信息
persons: [{
id: '1',
name: 'zs',
score: '99',
time: Date.now()
},{
id: '2',
name: 'ls',
score: '88',
time: Date.now()
},{
id: '3',
name: 'ww',
score: '77',
time: Date.now()
}],
// 一个临时记录学生信息的对象
person: {
id: '',
name: '',
score: ''
}
},
methods: {
// 用于编辑的方法
edit(){
this.isDisabled = !this.isDisabled;
},
// 用于删除的方法
del(index){
this.persons.splice(index, 1);
},
// 用于更多操作的方法
toggle(){
this.isShow = !this.isShow;
},
// 用于增加学生的方法
add(){
this.person.time = Date.now();
this.persons.push(this.person);
this.person = {
id: '',
name: '',
score: ''
}
},
// 用于查询信息的方法
query(){
let newPerson = this.persons.filter( (person) => {
if (this.person.score === person.score){
return true;
} else if (this.person.id === person.id){
return true;
} else if (this.person.name === person.name){
return true;
}
});
this.persons = newPerson;
this.person = {
id: '',
name: '',
score: ''
}
}
}
});
</script>
