电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)

瀏覽:97日期:2022-10-05 17:29:01

利用vue和bootstrap做了一個比較簡易的學(xué)生管理系統(tǒng),供大家參考,具體內(nèi)容如下

廢話不多說,先來看看效果圖

Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)

Vue+Bootstrap實現(xiàn)簡易學(xué)生管理系統(tǒng)

附上源代碼:

<!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='http://www.hdgsjgj.cn/public/css/bootstrap.min.css' rel='stylesheet'> <link href='http://www.hdgsjgj.cn/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)' 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' placeholder='姓名' name='stuname'> </td> </tr> <tr> <td>年齡</td> <td> <input v-model='stuAge' type='text' placeholder='年齡' name='stuage'> </td> </tr> <tr> <td>性別</td> <td> <label class='gen-span'><input v-model='stuGender' type='radio' name='gender' checked value='男'> 男</label> <label class='gen-span'><input v-model='stuGender' type='radio' name='gender' value='女'> 女</label> <label class='gen-span'><input v-model='stuGender' type='radio' name='gender' value='保密'> 保密</label> </td> </tr> </table> <div style='text-align: center;'><input type='button' value='確定增加' @click='add'/></div> </form> </div> <!-- 刪除按鈕確認(rèn)框 --> <div v-show='isDialogShow' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'> <div role='document'> <div class='modal-content'> <div class='modal-header'> <button @click='isDialogShow=false' type='button' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> <h4 id='exampleModalLabel'>確認(rèn)框</h4> </div> <div class='modal-body'> <form> <div class='form-group'> <label for='message-text' class='control-label'>確定要刪除<strong style='color:blue'>{{delStuName}}</strong>嗎?</label> </div> </form> </div> <div class='modal-footer'> <button type='button' data-dismiss='modal' @click='isDialogShow=false'>返回</button> <a href='http://www.hdgsjgj.cn/bcjs/10365.html###' rel='external nofollow' class='delete-a'><button type='button' @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ǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 北京公寓出租网-北京酒店式公寓出租平台 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 武汉森源蓝天环境科技工程有限公司-为环境污染治理提供协同解决方案 | 东莞ERP软件_广州云ERP_中山ERP_台湾工厂erp系统-广东顺景软件科技有限公司 | 铣床|万能铣床|立式铣床|数控铣床|山东滕州万友机床有限公司 | 耐腐蚀泵,耐腐蚀真空泵,玻璃钢真空泵-淄博华舜耐腐蚀真空泵有限公司 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | 赛尔特智能移动阳光房-阳光房厂家-赛尔特建筑科技(广东)有限公司 | 儿童乐园|游乐场|淘气堡招商加盟|室内儿童游乐园配套设备|生产厂家|开心哈乐儿童乐园 | 大型冰雕-景区冰雕展制作公司,3D创意设计源头厂家-[赛北冰雕] | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 楼承板-开口楼承板-闭口楼承板-无锡海逵 | 一点车讯-汽车网站,每天一点最新车讯! | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 镀锌角钢_槽钢_扁钢_圆钢_方矩管厂家_镀锌花纹板-海邦钢铁(天津)有限公司 | 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 至顶网| 网站建设-网站制作-网站设计-网站开发定制公司-网站SEO优化推广-咏熠软件 | 【ph计】|在线ph计|工业ph计|ph计厂家|ph计价格|酸度计生产厂家_武汉吉尔德科技有限公司 | 作文导航网_作文之家_满分作文_优秀作文_作文大全_作文素材_最新作文分享发布平台 | 2025福建平潭岛旅游攻略|蓝眼泪,景点,住宿攻略-趣平潭网 | 雨燕360体育免费直播_雨燕360免费NBA直播_NBA篮球高清直播无插件-雨燕360体育直播 | 上海璟文空运首页_一级航空货运代理公司_机场快递当日达 | 微波消解仪器_智能微波消解仪报价_高压微波消解仪厂家_那艾 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 挖掘机挖斗和铲斗生产厂家选择徐州崛起机械制造有限公司 | 大型工业风扇_工业大风扇_大吊扇_厂房车间降温-合昌大风扇 | 智能终端_RTU_dcm_北斗星空自动化科技| 合肥宠物店装修_合肥宠物美容院装修_合肥宠物医院设计装修公司-安徽盛世和居装饰 | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 上海乾拓贸易有限公司-日本SMC电磁阀_德国FESTO电磁阀_德国FESTO气缸 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 沈阳网站建设_沈阳网站制作_沈阳网页设计-做网站就找示剑新零售 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 南京泽朗生物科技有限公司-液体饮料代加工_果汁饮料代加工_固体饮料代加工 | 叉车电池-叉车电瓶-叉车蓄电池-铅酸蓄电池-电动叉车蓄电池生产厂家 | 老城街小面官网_正宗重庆小面加盟技术培训_特色面馆加盟|牛肉拉面|招商加盟代理费用多少钱 |