<style>
 [v-cloak]{
  display: none;
 }
 table{
  width: 800px;
  border-collapse: collapse;
  margin: 20px auto;
 }
 table th,table td{
  background: #0094ff;
  color: white;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  border: 1px solid black;
 }
 table td{
  background: #fff;
  color: red;
 }
</style>

<div id="app">
 <input type="text" v-model="id">
 <input type="text" v-model="pname">
 <button @click="addData">添加</button>
 <table>
  <tr>
   <th>編號</th>
   <th>名稱</th>
   <th>創(chuàng)建時間</th>
   <th>操作</th>
  </tr>
  <tr v-if="list.length == 0">
   <td colspan="4">當前列表無數據</td>
  </tr>
  <tr v-for="(item,index) in list">
   <td>{{item.id}}</td>
   <td>{{item.pname}}</td>
   <td>{{item.ctime}}</td>
   <td>
    <!-- 方法一 -->
    <!-- <a href="#" @click="delData(index)">刪除</a> -->
    <!-- 方法二 -->
    <a href="#" @click="delData(item.id)">刪除</a>
   </td>
  </tr>
 </table>
</div>

<script src="../dist/vue.js"></script>
<script>
 var vm = new Vue({
  el: '#app',
  data: {
   id: 0,
   pname: '',
   list: [
    {id: 1, pname: '奔馳1', ctime: new Date}
   ]
  },
  methods: {
   addData(){
    // 包裝成list要求的對象
    var p = {id: this.id, pname: this.pname, ctime: new Date()}
    this.list.push(p);
    // 清空文本框中的數據
    this.id = 0;
    this.pname = '';
   },
   delData: function(index){
    if(!confirm('是否要刪除當前數據')){
     //當用戶點擊的取消按鈕的時候，應該阻斷這個方法中的后面代碼的繼續(xù)執(zhí)行
     return;
    }

    // 方法一
    // this.list.splice(index,1);
    // 方法二：
    // 根據 id 獲取要刪除的索引，方法一是直接傳入刪除數組的索引
    var index = this.list.findIndex(function(item){
     return item.id == index;
    });
    this.list.splice(index,1);
   }
  }
 });
</script>