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>
