Vue+Bootstrap实现简易学生管理系统


Posted in Vue.js onFebruary 09, 2021

利用vue和bootstrap做了一个比较简易的学生管理系统,供大家参考,具体内容如下

废话不多说,先来看看效果图

Vue+Bootstrap实现简易学生管理系统

Vue+Bootstrap实现简易学生管理系统

附上源代码:

<!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>学生管理系统</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>学生管理系统v1.0-展示学生</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>添加学生信息</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>
 <!-- 删除按钮确认框 -->
 <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">确认框</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()">确认</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() {
 // 业务逻辑
 // 只要有一个为空就终止执行
 if(!this.stuName || !this.stuAge) {
  alert("姓名和年龄不能为空")
  return 
 }
 this.stuInfoArr.push({ name:this.stuName , age:this.stuAge, gender:this.stuGender })
 },
 // 点击删除按钮触发的函数
 showDialog(name,key) {
 this.isDialogShow = true,
 this.delStuName = name,
 this.index = key
 },
 delStuInfo() {
 // 真正实现删除功能
 this.stuInfoArr.splice(this.index, 1),
 this.isDialogShow = false
 }
 },   
 })
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue 的 v-model用法实例
Nov 23 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
You might like
PHP 实现判断用户是否手机访问
2015/01/21 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
短信提示使用 特效
2007/01/19 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
培训心得体会
2013/12/29 职场文书
内科护士节演讲稿
2014/09/11 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
公务员政审材料范文
2014/12/23 职场文书
毕业生党员个人总结
2015/02/14 职场文书
会计求职自荐信范文
2015/03/04 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS