1. 程式人生 > >vue+bootstrap 實現資料的增刪改查

vue+bootstrap 實現資料的增刪改查

需要自己吧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>