bootstrap+vue實現資訊的增刪改查
阿新 • • 發佈：2019-02-08
主要是對bootstrap和vue的基本用法進行一個練習，程式碼奉上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>資訊管理系統</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #container{ padding: 0 100px; } h2,h5,label,h3{ font-weight: 700; } h3{ color: #3071A9; } .radio1{ background: #fff; } table{ text-align: center; } th{ text-align: center; color: #A94442; td{ color: #000; } </style> </head> <body> <div class="out" id="container"> <h2>資訊管理系統</h2> <div> <div class="form-group"> <label for="username">姓名</label> <input type="text" class="form-control" id="username" placeholder="請輸入姓名" v-model="name"> </div> <div class="form-group"> <label for="age">年齡</label> <input type="text" class="form-control" id="age" placeholder="請輸入年齡" v-model="aage"> </div> <div class="form-group"> <label for="exampleInputFile">職位</label> <select class="form-control" v-model="enginer"> <option>ios工程師</option> <option>H5工程師</option> <option>Java工程師</option> <option>UI設計師</option> </select> </div> <div class="checkbox"> <h5 >性別</h5> 男： <input v-model="sex" class="radio1" type="radio" name="sex" value="男"> 女： <input v-model="sex" class="radio1" type="radio" name="sex" value="女"> </div> <button class="btn btn-info" v-on:click="add($event)">新增</button> <button class="btn btn-danger" @click="chongz($event)">重置</button> </div> <h3>使用者資訊表</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.name}}</td> <td> <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" @click="chakan(i,item)">檢視</button> </td> <td> <button class="btn btn-danger" v-on:click="dele(i)">刪除</button> </td> <td> <button class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" @click="chakan(i,item)">修改</button> </td> </tr> </table> <!--檢視的模態框--> <div id="look"> <div 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 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"> <div class="form-group"> <label for="recipient-name" class="control-label">姓名:</label> <input type="text" class="form-control" id="recipient-name" v-model="n"> </div> <div class="form-group"> <label for="recipient-name1" class="control-label">年齡:</label> <input type="text" class="form-control" id="recipient-name1" v-model="a"> </div> <div class="form-group"> <label for="recipient-name2" class="control-label">職位:</label> <input type="text" class="form-control" id="recipient-name2" v-model="e"> </div> <div class="form-group"> <label for="recipient-name3" class="control-label">性別：</label> <input type="text" class="form-control" id="recipient-name3" v-model="s"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" data-dismiss="modal" @click="xiugai()">確定</button> </div> </div> </div> </div> </div> </div> <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el:".out", data:{ name:"", aage:"", enginer:"", sex:"", arr:[], n:"", a:"", e:"", s:"", index:"" }, methods:{ add(e){ this.arr.push({name:this.name,age:this.aage,enginer:this.enginer,sex:this.sex}); this.name=""; this.aage=""; this.enginer=""; this.sex="" }, chongz(e){ this.name=""; this.aage=""; this.enginer=""; this.sex="" }, dele(i){ this.arr.splice(i,1) }, chakan(i,item){ // var index =""; this.n=item.name; this.a=item.age; this.e=item.enginer; this.s=item.sex; // return index=i; index=i }, xiugai(){ // console.log(this.arr[index]) this.arr[index].name = this.n; this.arr[index].age = this.a; this.arr[index].enginer = this.e; this.arr[index].sex = this.s; // this.arr.splice(i,1,{name:item.name}) } } }) </script> </body> </html>
注：檔案的話，可以去官網下載，也可以去bootcdn去引入一下。