本例要結合過渡動畫四個過程的示意圖一起理解。
https://cn.vuejs.org/v2/guide/transitions.html
疑問：
v-for="(item,i) in list" del(i) 傳參不傳id，改成i ，這個是什么用法？
<style> li{ border: 1px dashed #999; margin: 5px; padding: 5px; line-height: 25px; font-size: 12px; width: 800px; } li:hover{ background-color: hotpink; transition: all 0.8s ease; } .v-enter,.v-leave-to { /* .v-enter, .v-leave-to 設置的過渡樣式 自動賦給transition 或 transitiongroup標簽了 */ opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { /* .v-enter-active, .v-leave-active 設置的過渡樣式 自動賦給transition 或 transitiongroup標簽了 */ transition: all 0.6s ease; } .v-move{ transition: all 0.6s ease; } /* v-move 特性。會在元素的改變定位的過程中應用。 比如列表中有元素被刪除,其他元素會上移 設置了v-move就會在這起作用. */ .v-leave-active{ position: absolute; /* 當元素設置了 absolute 后，默認就不是100%的寬度了，而是內容多寬就是多寬 所以要給li元素設置一下寬度. */ } /* 用splice刪除數組的元素，由於刪除的元素經歷了一個過渡，始終占據文檔流的這個位置， 因此下一個元素要等待其過渡消失后再移動過來，造成一個生硬的效果。 要達到平滑過渡，就要在刪除元素leave-active階段, 用position:absolute 讓刪除的元素脫離文檔流，后面的元素才能同時平滑過渡過來。 */ </style> </head> <body> <div id="app"> ID:<input type="text" v-model="id"> NAME:<input type="text" v-model="name"> <input type="button" value="添加" @click="add()"> <!-- 通過 appear 特性設置節點的在初始渲染的過渡 也就是頁面剛加載的時候，實現過渡動畫 --> <transition-group tag="ul" appear> <li v-for="(item,i) in list" @click="del(i)" :key="item.id"> <!-- v-for="(item,i) in list" del(i) 傳參不傳id，改成i ??? 這個是什么用法--> {{item.id}} --- {{item.name}} </li> </transition-group> </div> <script> var vm = new Vue({ el:'#app', data:{ id:'', name:'', list:[ {id:1, name:'趙高'}, // list里用到的id name 等，要先定義在data {id:2, name:'秦檜'}, {id:3, name:'嚴嵩'}, {id:4, name:'魏忠賢'} ] }, methods:{ add(el){ this.list.push({id:this.id, name:this.name}); this.id = this.name = ''; }, del(i){ this.list.splice(i,1); // i 的用法？？ }, }, }); </script> </body>