使用vue前端框架尝试做一个购物车页面，勾选进购物车的商品列表可删除，代码如下：
**<template>部分** <div class="goods-list-wrap"> <transition-group name="list-complete"> <div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index"> <img :src="item.img" /> <div class="J-shoping-list-a"> <p>{{item.price}}</p> <p> <span class='goods-list-num'>{{item.num}}</span> <span class='goods-list-price'>$ {{item.num * parseInt(item.price) || 0}}</span> </p> </div> <i class="el-icon-close goods-del-icon" @click="removeItem(item,index)"></i> </div> </transition-group> </div> **<script>部分** data:function(){ return { goodsList:[ {name: "apple", price: "5.00", num: "2", img: "/static/test/1.jpg"}, {name: "pear", price: "3.00", num: "1", img: "/static/test/2.jpg"}, {name: "grape", price: "7.90", num: "5", img: "/static/test/3.jpg"}, {name: "lemon", price: "2.50", num: "3", img: "/static/test/4.jpg"}, {name: "banan", price: "1.90", num: "7", img: "/static/test/5.jpg"}, {name: "cherry", price: "8.89", num: "2", img: "/static/test/6.jpeg"}, ] } }, methods:{ removeItem(ele,idx) { this.goodsList.splice(idx, 1); }, } **<style>部分（节选）** .J-shoping-list { transition: all 1s; } .list-complete-enter, .list-complete-leave-to{ opacity: 0; transform: translateY(30px); } .list-complete-leave-active { position: absolute; }代码部分完成之后，测试过程中出现了如下问题：
动画效果是有了，但是不管删除哪一项，动画都作用在最后一个列表项。 通过查阅资料，发现问题出在循环生成列表项时绑定的key值上，因为key是vue框架用来标识节点唯一性的，当使用index作为key值时，执行删除操作，删除之后的新数组index从1-6变为了1-5，此时，虚拟DOM认为列表项的最后一项需要应用动画效果。所以，改为选用其他属性作为key值，如name（本例中的name属性值无重复）。 <div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index"> 改为
<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="item.name">修改之后的动画效果为： 成功～撒花(_)∠※
