注意：
1.通过v-for遍历多个元素时，不用transition而用transition-group包裹。同时，需要定义key属性。
2.注意一下边框的虚线效果，以前没注意。以及退场时，套用的两段代码，以后理解。
3.transition-group还要两个属性，appear属性指定整体的列表渲染时的动画，tag="ul"为渲染transition-group时不当作<span>
标签（不符合规范），而是渲染成tag属性指定的标签类型。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<style>
li{
border: 1px dashed #777777;
/*dashed表示虚线*/
border-radius: 3px;
margin: 5px;
line-height: 150%;
padding: 10px 10px;
}
.v-enter,
.v-lerve-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-lerve-active{
transition: all 1s ease;
}
/*添加进场效果*/
.v-move{
transition: all 2s ease;
}
.v-leave-active{
position: absolute;
}
/*三板斧记住以后理解*/
</style>
</head>
<body>
<div id="app">
<div>
<lable>
name:
<input type="text" v-model="name">
</lable>
<lable>
qq号:
<input type="text" v-model="qq">
</lable>
<lable>
幸福指数:
<input type="text" v-model="happyNum">
</lable>
<input type="button" @click="add" value="插入">
</div>
<ul>
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.happyNum" @click="del(i)" >
{{ item.name }} +++ {{ item.qq }} +++{{ item.happyNum }}
</li>
</transition-group>
<!--对于v-for遍历有一组数据的过渡，不能使用transition包裹后，然后定义动画效果，而是使用transition-group进行包裹-->
<!--同时，对于transition-group包裹的元素，必须要有唯一的key属性，同数据库关键字效果-->
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:null,
qq:null,
happyNum:'',
//还是注意这里如果这里是查询，不能写null表示空，而是直接使用‘’表示
list:[{name:'陈小帅',qq:3199578835,happyNum:10},
{name:'陈帅帅',qq:3199578835,happyNum:5},
{name:'陈da帅',qq:3199578835,happyNum:9},
]
},
methods:{
add(){
this.list.push({ name:this.name,qq:this.qq,happyNum:this.happyNum});
this.name = this.qq = this.happyNum = '';
},
del(i){
this.list.splice(i,1);
}
}
});
</script>
</body>
</html>效果：
