>效果如圖  >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; } ```