vue实现信息管理系统


Posted in Javascript onMay 30, 2020

最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增、删、改、查

具体效果在结尾处有附图

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  body,html{
  margin: 20px 50px;
  }
  .title2{
  color: blueviolet;
  }
  .table th,td{
  text-align: center;
  
  }
 </style>
 
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
 
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <h1>信息管理系统</h1>
 <div id="box">
  <div class="form-group">
  <label for="user">姓名</label>
  <input type="text" class="form-control" id="user" placeholder="请输入姓名" v-model='user'>
  </div>
  <div class="form-group">
  <label for="age">年龄</label>
  <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model='age'>
  </div>
  <div class="form-group">
   <label for="">职位</label>
   <select class="form-control" class="zhiwei" v-model='zhiwei'>
   <option>ios工程师</option>
   <option>h5工程师</option>
   <option>java工程师</option>
   <option>UI设计师</option>
   
   </select>
  </div>
  <div class="form-group">
  <label for="sex">性别</label>
  <input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="男" v-model='sex'> 男
  <input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="女" v-model='sex'> 女
  </div>
  
  <button class="btn btn-success" @click='add()'>添加</button>
  <button class="btn btn-danger" @click="chongzhi()">重置</button>
  
  <h3 class="title2">用户信息表</h3>
 
  <table class="table table-bordered">
   <tr>
   <th>序号</th>
   <th>姓名</th>
   <th>信息</th>
   <th>操作</th>
   <th>操作</th>
   </tr>
   <tr v-for="(item,i) in arr">
   <td>{{i}}</td>
   <td>{{item.user}}</td>
   <td><button class="btn btn-success " type="button" data-toggle="modal" data-target="#myModal" @click='detail(i)'>查看</button></td>
   <td><button class="btn btn-success" @click='del(i)'>删除</button></td>
   <td><button class="btn btn-success" @click='update(i)'>修改</button></td>
   </tr>
  </table>
 
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="myModalLabel">详情</h4>
  </div>
  <div class="modal-body">
  <ul>
   <li>姓名:{{user}}</li>
   <li>年龄:{{age}}</li>
   <li>职位:{{zhiwei}}</li>
   <li>性别:{{sex}}</li>
   
  </ul> 
  
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary">确定</button>
  </div>
  </div>
  </div>
 </div>
 
 </div>
 
 </body>
 <script type="text/javascript">
 var vm = new Vue({
  el:"#box",
  data:{
  user:'',
  age:'',
  zhiwei:'',
  sex:'',
  arr:[]
  },
  methods:{
  add(){
   this.arr.push({
   user:this.user,
   age:this.age,
   sex:this.sex,
   zhiwei:this.zhiwei
   })
   this.user = '';
   this.age = '';
   this.zhiwei = '';
   this.sex='';
  },
  del(i){
   this.arr.splice(i,1)
  },
  chongzhi(){
   this.user = '';
   this.age = '';
   this.zhiwei = '';
   this.sex = "";
   
  },
  detail(i){
   this.user = this.arr[i].user
   this.age = this.arr[i].age
   this.zhiwei = this.arr[i].zhiwei 
   this.sex = this.arr[i].sex
  },
  update(i){
   
   this.arr[i].user = prompt('请修改名字')
   this.arr[i].age = prompt(' 请修改年龄')
   this.arr[i].zhiwei = prompt('请修改职位')
   this.arr[i].sex = prompt(' 请修改性别')
   
   //console.log(prompt(' 修改名字'))
  }
  
  }
 })
 </script>
</html>

vue实现信息管理系统

vue实现信息管理系统

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
如何学习Javascript入门指导
Nov 01 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
JsRender for object语法简介
Oct 31 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
vue实现户籍管理系统
May 29 #Javascript
JavaScript闭包原理与用法学习笔记
May 29 #Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
JS组件库AlloyTouch实现图片轮播过程解析
May 29 #Javascript
基于vue实现探探滑动组件功能
May 29 #Javascript
JS实现前端路由功能示例【原生路由】
May 29 #Javascript
You might like
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python修改MP3文件的方法
2015/06/15 Python
Python实现学校管理系统
2018/01/11 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python for和else语句趣谈
2019/07/02 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
党员领导干部承诺书
2014/05/28 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
道歉信怎么写
2015/05/12 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle