<div class='container'>
   <form action="">
       <div class='form-group'>
           <label for="">用戶名</label>
           <input type="text" class='form-control' placeholder="請輸入用戶名" v-model="student.uname">
       </div>
       <div class='form-group'>
           <label for="">密碼</label>
           <input type="text" class='form-control' placeholder="請輸入密碼" v-model="student.pass">
       </div>
       <div class='form-group'>
           <label for="">郵箱</label>
           <input type="text" class='form-control' placeholder="請輸入郵箱" v-model="student.email">
       </div>
       <div class='form-group text-center'>
          <!-- success  綠色    info  藍色   danger  紅色  warning   黃色   primary  藍色    -->
           <input type="text" class='btn btn-success' value='添加' @click='add'>
           <input type="text" class='btn btn-info' value='重置'>
       </div>
   </form>
   <table class='table table-bordered'>
       <thead>
           <tr>
               <th>編號</th>
               <th>姓名</th>
               <th>密碼</th>
               <th>郵箱</th>
               <th>操作</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for="(value,index) in user">
               <td>{{index+1}}</td>
               <td>{{value.uname}}</td>
               <td>{{value.pass}}</td>
               <td>{{value.email}}</td>
               <td>
                   <button @click='delt(index)'>刪除</button>
               </td>
           </tr>
       </tbody>
   </table>
</div>

<script src='js/vue.js'></script>
<script>
   
new Vue({
    el:'.container',
    data:{
        user:[
          {uname:'jack',pass:'123456',email:'123@126.com'},
          {uname:'rose',pass:'789456',email:'456@126.com'},
          {uname:'tom',pass:'456321',email:'789@126.com'}
        ],
        student:{}
    },
    methods:{
        add:function(){
            this.user.push(this.student);
            this.student={}
        },
        delt:function(ind){
            this.user.splice(ind,1)
        }
    }
})







</script>