汽车系统实现--增加数据和删除数据

<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel panel-body form-inline">
<label>
Id:<input type="text" class="form-control" v-model="id">
</label>


        <label>
                name:<input type="text" class="form-control" v-model="name">
        </label>



              <input type="button" value="添加" class="btn btn-primary" @click="add"> 
      </div>
  </div>




<table class="table table-striped">
    <thead>
      <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
      </tr>
    </thead>



    <tbody>
    <tr v-for="item in list" :key="item.id">
       <td>{{ item.id }}</td>
       <td>{{ item.name }}</td>
       <td>{{ item.ctime }}</td>
       <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
    </tr>
    </tbody>
</table>
</div>

<script>
var vm=new Vue({
    el:"#app",
    data:{
        id:'',
        name:'',
        list:[
            {id:1,name:"宝马",ctime:new Date()},
            {id:2,name:"奔驰",ctime:new Date()},
    ]
    },
    methods: {
        add(){ //添加的方法 
         var car={ id:this.id,   name:this.name, ctime:new Date()}
        
         this.list.push(car);

        //  当你输入后可以清空。不让他在此占位
        //  this.id='';
        //  this.name='';
        this.id=this.name='';
        },
        del(id){
            // 如何根据id，删除该索引中的数据哦，---第一种方式
            //  this.list.some((item,i)=>{
            //      if(item.id==id){
            //          console.log(id)
            //          this.list.splice(i,1)
            //         //  在数组中some方法，如果return true,就会立刻终止这个数组的后续循环。
            //          return true;
            //      }
            //  })
            // 找到索引直接。直接调用数组的splice这个方法


            // 快速的找到索引值----第而只能够放似
            var index=this.list.findIndex(item=>{
                if(item.id==id){
                    return true;
                }
            });
            // console.log(index);
            this.list.splice(index,1);

        }
    },

})
</script>