1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <style> 12 li{ 13 border:1px dashed #999; 14 margin: 5px; 15 line-height: 35px; 16 padding-left: 5px; 17 font-size: 12px; 18 } 19 li:hover{ 20 background-color: hotpink; 21 transition: all 0.8s ease; 22 } 23 24 .v-enter, 25 .v-leave-to{ 26 opacity: 0; 27 transform: translateY(80px); 28 } 29 30 .v-enter-active, 31 .v-leave-active{ 32 transition: all 0.6s ease; 33 } 34 </style> 35 </head> 36 37 <body> 38 <div id="app"> 39 <div> 40 <label> 41 Id: 42 <input type="text" v-model="id"> 43 </label> 44 45 <label> 46 Name: 47 <input type="text" v-model="name"> 48 </label> 49 50 <input type="button" value="添加" @click="add"> 51 </div> 52 <ul> 53 <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup --> 54 <!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性 --> 55 <transition-group> 56 <li v-for="item in list" :key="item.id"> 57 {{item.id}}---{{item.name}} 58 </li> 59 </transition-group> 60 </ul> 61 </div> 62 63 <script> 64 //创建 Vue 实例，得到 ViewModel 65 var vm = new Vue({ 66 el:'#app', 67 data:{ 68 id:'', 69 name:'', 70 list:[ 71 {id:1,name:'赵高'}, 72 {id:2,name:'秦桧'}, 73 {id:3,name:'严嵩'}, 74 {id:4,name:'魏忠贤'}, 75 ] 76 }, 77 methods:{ 78 add(){ 79 this.list.push({id:this.id,name:this.name}) 80 this.id=this.name='' 81 } 82 } 83 }); 84 </script> 85 </body> 86 </html>