vue實(shí)現(xiàn)信息管理系統(tǒng)

更新時間：2020年05月30日 10:47:55 作者：MarkJunHao

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近學(xué)習(xí)了vue，自己用bootstrap+vue寫了一個信息管理系統(tǒng)，只有前端，沒有后臺，可以實(shí)現(xiàn)基本的增、刪、改、查

具體效果在結(jié)尾處有附圖

<!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  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>信息管理系統(tǒng)</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設(shè)計(jì)師</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">&times;</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">關(guān)閉</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>