利用vue和bootstrap做了一個比較簡易的學(xué)生管理系統(tǒng)，供大家參考，具體內(nèi)容如下
廢話不多說，先來看看效果圖
附上源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>學(xué)生管理系統(tǒng)</title> <link href="../public/css/bootstrap.min.css" rel="stylesheet"> <link href="../public/css/style.css" rel="stylesheet"> <style> .row>div{border: 1px solid #000;} .modal{display: block;opacity:1;top: 100px; overflow:visible;} </style></head><body> <div id="app"> <div class="container"> <table class="table table-striped"> <caption>學(xué)生管理系統(tǒng)v1.0-展示學(xué)生</caption> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>操作</th> </tr> <tr v-for="item,key in stuInfoArr"> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.gender}}</td> <td><button @click="showDialog(item.name,key)" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">刪除</button></td> </tr> </table> <hr> <hr> <hr> <form action=""> <table class="table table-striped"> <caption>添加學(xué)生信息</caption> <tr> <td>項目</td> <td>信息</td> </tr> <tr> <td>姓名</td> <td> <input v-model="stuName" type="text" class="form-control" id="stuname" placeholder="姓名" name="stuname"> </td> </tr> <tr> <td>年齡</td> <td> <input v-model="stuAge" type="text" class="form-control" id="stuage" placeholder="年齡" name="stuage"> </td> </tr> <tr> <td>性別</td> <td> <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" checked value="男"> 男</label> <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="女"> 女</label> <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="保密"> 保密</label> </td> </tr> </table> <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="確定增加" @click="add"/></div> </form> </div> <!-- 刪除按鈕確認(rèn)框 --> <div v-show="isDialogShow" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button @click="isDialogShow=false" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">確認(rèn)框</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="message-text" class="control-label">確定要刪除<strong class="control-label-name" style="color:blue">{{delStuName}}</strong>嗎？</label> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" @click="isDialogShow=false">返回</button> <a href="###" rel="external nofollow" class="delete-a"><button type="button" class="btn btn-primary" @click="delStuInfo()">確認(rèn)</button></a> </div> </div> </div> </div> </div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script> new Vue({ el: '#app', data: { stuInfoArr: [ { name: '小明', age:12, gender:"男" }, { name: '小紅', age:10, gender:"女" }, { name: '小剛', age:16, gender:"保密" } ], isDialogShow: false, stuName: "", stuAge:"", stuGender:"男" , delStuName:'xx', index: "" }, methods:{ add() { // 業(yè)務(wù)邏輯 // 只要有一個為空就終止執(zhí)行 if(!this.stuName || !this.stuAge) { alert("姓名和年齡不能為空") return } this.stuInfoArr.push({ name:this.stuName , age:this.stuAge, gender:this.stuGender }) }, // 點擊刪除按鈕觸發(fā)的函數(shù) showDialog(name,key) { this.isDialogShow = true, this.delStuName = name, this.index = key }, delStuInfo() { // 真正實現(xiàn)刪除功能 this.stuInfoArr.splice(this.index, 1), this.isDialogShow = false } }, })</script></body></html> |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/weixin_45257157/article/details/113719079
