vue實現資訊管理系統
阿新 • • 發佈:2020-05-31
最近學習了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="external nofollow" 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。