這個問題卡了我一下午， 一直找不到答案， 然後用谷歌瀏覽器，解決一分鐘就解決了，
就用 table transition-group 搜索 裏面前三都是答案，
我本人立帖爲證 以後查問題，不在百度 直接去谷歌瀏覽 . 如若違反判定跑步4公里.
在看的朋友如有我的毛病，請及時改正.
我之前是這麼寫的：
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
< transition-group" >
<tr v-for="item,index in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td style="color: #0e9aef"><a href="#">刪除</a></td>
</tr>
</transition-group>
</table>
官方文檔的解釋：解析 DOM 模板時的注意事項原來，在table裏使用的時候，生成的真實元素之所以 會脫離table標籤，並插到了table標籤前，是因爲 這個 組件會被作爲無效的內容提升到外部，並導致最終渲染結果出錯。這裏官方文檔給出了一個解決辦法：特殊特性 is ：
結果很明顯就是 用is 擺脫 默認行爲，以至於不讓他往外偏離.
完整的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
td:hover{
background-color: #1dc5a3;
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="pp" >
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加寵物</h3>
</div>
<div class="panel-body form-inline">
<label>id:</label>
<input type="text" v-model="id" class="form-control">
<label>name:</label>
<input type="text" v-model="name" class="form-control">
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody is="transition-group" appear>
<tr v-for="item,index in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td style="color: #0e9aef"><a href="#">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<div>
<script>
var vue=new Vue(
{
el: '#pp',
data: {
id:'',
name:'',
list:[{id:1,name:"小狗",ctime:new Date()},{id:2,name:"小貓",ctime:new Date()},{id:3,name:"金魚",ctime:new Date()},{id:4,name:"大閘蟹",ctime:new Date()}]
},
methods: {
add: function () {
this.list.push({id:this.id,ctime:new Date(),name: this.name})
this.name=this.id=''
}
}
}
)
</script>
</div>
</body>
</html>