Vue创建table表格（添加和删除）

首先引入Vue.js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

<div>
        <table id="table">
            <thead>
                 <tr>
                    <th>编号</th>
                     <th>姓名</th>
                     <th>年龄</th>
                     <th>操作</th>
                 </tr>
            </thead>
             <tbody>
                  <tr v-for="(user,index) in stu">
                      <td>{{index+1}}</td>
                      <td>{{user.name}}</td>
                      <td>{{user.age}}</td>
                      <td><button @click="remove(index)">移除</button></td>
                  </tr>
                  <tr>
                      <td></td>
                      <td><input id="name" v-model="user.name"></td>
                      <td><input id="age" v-model="user.age"></td>
                      <td><button @click="insert">添加</button></td>
                  </tr>
            </tbody>
        </table> 
         
   </div>  

写script

<script type="text/javascript">
    new Vue({
      el:'#table',
      data:{
         user:{name:'',age:''},
         stu:[
             {'name': '张三', 'age': 17},
             {'name': '里斯', 'age': 18},
             {'name': '王五', 'age': 19}
         ]
      },
     methods:{
     
       insert:function(){
          this.stu.push(this.user)
       },
       remove:function(index){
         this.stu.splice(index,1)
       }
       
     }
    })
 </script>

注：第一个地方是data数据里面的user:{name:' ',age:' '}千万不能省略，如果省略就所有数据都不显示 

       第二个是insert中this.stu.push(this.user)是添加里面的user