>效果如图  >html代码 ``` <div id="app"> <input type="text" v-model="key"> <input type="text" v-model="item"> <input type="button" value="添加" @click="add"> <!-- 使用transition-group包裹v-for的元素，并且要加:key --> <!-- appear实现加载动画，tag使transitiongroup变为ul --> <transition-group appear tag="ul"> <li v-for="(item, i) in list" v-bind:key="item.key" @click="del(i)"> {{item.key}}-----{{item.item}}--index:{{i}} </li> </transition-group> </div> ``` >js代码 ``` var vm = new Vue({ el: '#app', data: { key: '', item: '', list: [ {key: '1', item: '第一项'}, {key: '2', item: '第二项'}, {key: '3', item: '第三项'}, {key: '4', item: '第四项'} ] }, methods: { add(){ var temp = {key: this.key, item: this.item}; this.list.push(temp); this.key = this.item = ''; }, del(i){ this.list.splice(i, 1); } } }) ``` >css代码 ``` * { margin: 0; padding: 0; } li { width: 100%; border: 1px dashed #ccc; padding: 6px 8px; margin-bottom: 5px; list-style-type: none; transition: all .8s ease; } li:hover { background-color: cadetblue; } /* 进入之前和离开之后的style */ .v-enter, .v-leave-to { opacity: 0; transform: translateY(100px); } /* 进入过程和离开过程的过渡 */ .v-enter-active, .v-leave-active { transition: all .5s ease; } /* 离开时变为absolute，导致下方上升 */ .v-leave-active { position: absolute; } /* 移动时的过渡时间 */ .v-move { transition: all .5s ease; } ```