使用vue写出简单的学生管理系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,tr,th,td{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div>
<p>学号<input type="text" v-model="stu.no"></p>
<p>姓名<input type="text" v-model="stu.uname"></p>
<p>性别<input type="text" v-model="stu.usex"></p>
<p>年龄<input type="text" v-model="stu.uage"></p>
</div>
<button @click="add">提交</button>
<button @click="del1">取消</button>
<table >
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="(item,index) of items">
<td>{
{
item.no}}</td>
<td>{
{
item.uname}}</td>
<td>{
{
item.usex}}</td>
<td>{
{
item.uage}}</td>
<td><button @click="del2(index)">删除</button></td>
</tr>
</table>
<button @click="add">添加</button>
<button @click="del(index)">删除</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="vue.js"></script> -->
<script>
new Vue({
el:#app,
data:{
isPart1: true,
isPart1Ps: true,
isPart2: true,
mask21: false,
items:[
{
no:1,uname:小刚,usex:男,uage:18},
{
no:2,uname:小红,usex:女,uage:17},
{
no:3,uname:小明,usex:男,uage:19},
{
no:4,uname:小志,usex:男,uage:18},
],
stu:{
no:,uname:,usex:,uage:}
},
methods:{
add(){
this.items.push(this.stu)
this.stu = {
}
console.log(this.stu)
},
del(){
this.items.pop()
},
del1(){
this.stu = {
}
},
del2(index){
this.items.splice(index,1)
},
edit2(index) {
this.stu = {
...this.items[index]};
this.mask21 = true;
this.modefyIndex = index;
},
}
})
</script>
</body>
</html>
上一篇：
IDEA上Java项目控制台中文乱码