vue+bootstrap 實現資料的增刪改查
阿新 • • 發佈：2019-01-02
需要自己吧vue這個檔案引入，可以從bootcdn中匯入
還需要把bootstrap這個檔案的css匯入
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <script src="lib/vue.js"></script> </head> <body> <div id="out" v-bind:style="{width:wit,margin:mar}"> <h2 style="font-weight: bold;">資訊管理系統</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">姓名</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" v-model="ipt1"> </div> <div class="form-group"> <label for="exampleInputPassword1">年齡</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" v-model="ipt2"> </div> <div class="form-group"> <label for="exampleInputPassword1">職位</label> <select class="form-control" v-model="ipt3"> <option>web工程師</option> <option>java工程師</option> <option>php工程師</option> <option>全棧工程師</option> </select> </div> <div class="form-group"> <label for="exampleInputPassword1">性別</label> </div> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" v-model="ipt4" value="男"> 男 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" v-model="ipt4" value="女"> 女 </label> <br /> <button type="button" class="btn btn-success" style="margin-top: 10px;" @click="btn1()">新增</button> <button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn2()">重置</button> </form> <h4 style="color: springgreen;font-weight:bold ;margin-top: 50px;">使用者資訊表</h4> <table class="table table-bordered" > <tr style="text-align: center;color:red;font-weight: bold;"> <td>序號</td> <td>姓名</td> <td>資訊</td> <td>操作</td> <td>操作</td> </tr> <tr style="text-align: center;" v-for="(item,i) in arr"> <td>{{i+1}}</td> <td >{{item[0]}}</td> <td><button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn3(i)">檢視</button></td> <td><button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn4(i)">刪除</button></td> <td><button type="button" class="btn btn-danger" style="margin-left:10px;margin-top:10px;" @click="btn5(i)">修改</button></td> </tr> </table> <div id="footer" style="width: 40%;height:300px;position: absolute;top: 50px;left: 30%;background: pink;text-align: center;" v-bind:style="{display:dis}"> <h3>個人資訊</h3> <table class="table table-bordered" style="width: 80%;margin: auto;"> <tr style="color:red;font-weight: bold;"> <td style="width: 50%;">姓名</td> <td>{{ico1}}</td> </tr> <tr style="color:red;font-weight: bold;"> <td>年齡</td> <td>{{ico2}}</td> </tr> <tr style="color:red;font-weight: bold;"> <td>性別</td> <td>{{ico3}}</td> </tr> <tr style="color:red;font-weight: bold;"> <td>職業</td> <td>{{ico4}}</td> </tr> </table> <button type="button" class="btn btn-success" style="float: right;margin: 20px;margin-right: 60px;" @click="btn6()">關閉</button> <button type="button" class="btn btn-danger" style="float: right;margin: 20px;" @click="btn6()">確定</button> </div> </div> <script> var vm = new Vue({ el:"#out", data:{ wit:'80%', mar:"0 auto", dis:"none", dis1:"none", ipt1:"", ipt2:"", ipt3:"", ipt4:"", ipt5:"", ipt6:"", ipt7:"", ipt8:"", arr:[], ico1:"", ico2:"", ico3:"", ico4:"" }, methods:{ btn1(){ this.arr.push([this.ipt1,this.ipt2,this.ipt3,this.ipt4]) this.ipt1="" this.ipt2="" this.ipt3="" this.ipt4="" }, btn2(){ this.arr="" }, btn3(i){ this.dis = "block" this.ico1=this.arr[i][0] this.ico2=this.arr[i][1] this.ico3=this.arr[i][2] this.ico4=this.arr[i][3] }, btn4(i){ this.arr.splice(i,1) }, btn5(i){ var name = prompt("請輸入修改後的名字"); var age = prompt("請輸入修改後的年齡"); var work = prompt("請輸入修改後的職業"); var sex = prompt("請輸入修改後的性別"); this.arr.splice(i,1,[name,age,work,sex]) }, btn6(){ this.dis="none" } } }) </script> </body> </html>