Vue小应用：vue实现一个简单的学生信息管理。
我们直接看源码：
HTML
x
122
122
1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>学生信息管理</title>6
<link rel="stylesheet" href="./lib/bootstrap.css" >7
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>8
<style type="text/css">9
#app{10
margin: 10px;11
}12
</style>13
</head>14
<body>15
<div id="app">16
<form class="form-inline">17
<div class="form-group">18
<label>学号：</label>19
<input type="text" class="form-control" v-model="stuNo">20
</div> 21
<div class="form-group">22
<label>姓名：</label>23
<input type="email" class="form-control" v-model="name" @keyup.enter="add">24
</div> 25
<input type="button" class="btn btn-primary" value="添加" @click="add">26
27
<div class="form-group">28
<label>搜索姓名关键字：</label>29
<input type="email" class="form-control" v-model="keywords" @keyup.enter="search(keywords)" v-focus>30
</div>31
</form>32
<br/>33
<table class="table table-bordered" >34
<thead>35
<th>学号</th>36
<th>姓名</th>37
<th>添加时间</th>38
<th>操作</th>39
</thead>40
<tbody v-for="(item,i) in search(keywords)" :key="item.stuNo" >41
<tr>42
<td>{{item.stuNo}}</td>43
<td>{{item.name}}</td>44
<td>{{item.cTime | dateFormat}}</td>45
<td><a href="" @click.prevent=" del(item.stuNo)">删除</a></td>46
</tr>47
</tbody>48
</table>49
</div>50
51
<script>52
// 自定义自动获取焦点的全局指令53
Vue.directive('focus',{54
// 当被绑定的元素插入到 DOM 中时……55
inserted: function (el) {56
// 聚焦元素57
el.focus()58
}59
})60
var vm = new Vue({61
el:'#app',62
data:{63
stuNo:'',64
name:'',65
keywords:'',66
list:[67
{68
stuNo:1710204016,69
name:'刘小红',70
cTime:new Date()71
},72
{73
stuNo:1710204007,74
name:'李大明',75
cTime:new Date()76
}77
]78
},79
methods:{80
add(){81
var newInfo = {stuNo:this.stuNo, name:this.name, cTime:new Date()}82
this.list.push(newInfo)83
this.stuNo=this.name=''84
},85
del(stuNo){86
this.list.some((item,i)=>{87
if(item.stuNo===stuNo){88
this.list.splice(i,1)89
return true;90
}91
})92
},93
search(keywords){94
// var newList = []95
// this.list.forEach(item=>{96
// if(item.name.indexOf(keywords)!=-1){97
// newList.push(item)98
// }99
// })100
// return newList101
return this.list.filter(item=>{102
if(item.name.includes(keywords)){103
return item104
}105
})106
}107
},108
filters:{109
dateFormat:function(dateStr){110
var year = dateStr.getFullYear()111
var mouth = (dateStr.getMonth() + 1).toString().padStart(2,'0')112
var date = (dateStr.getDate()).toString().padStart(2,'0')113
var h = (dateStr.getHours()).toString().padStart(2,'0')114
var m = (dateStr.getMinutes()).toString().padStart(2,'0')115
var s = (dateStr.getSeconds()).toString().padStart(2,'0')116
return `${year}-${mouth}-${date} ${h}:${m}:${s}`117
}118
}119
})120
</script>121
</body>122
</html>阅读剩余 79%
作者：冒牌SEO，如若转载，请注明出处：https://www.web176.com/news/frontend/8279.html
支付宝 
微信 