vue 通过在某一时刻 添加一些样式，实现动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> /*添加的时候*/ .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 3s; } /*移除的时候*/ .fade-leave-to { opacity: 0; } .fade-leave-active { transition: opacity .3s; } </style> </head> <body> <div id="app"> count : {{size}} <input type="text" v-model="inputValue"> <button @click="press">press</button> <ul> <transition-group name="fade"> <todo-item :content="i" v-for="(i,index) in list" :index="index" :key="index" @delete="deleteChild(index)"></todo-item> </transition-group> </ul> </div> <script> let todoItem = { props: ['content'], template: '<li @click="press">{{content}}</li>', methods: { press(target) { this.$emit('delete') } } } const app = new Vue({ el: '#app', data: { list: ['第一', '第二'], inputValue: '', count: 0 }, components: { TodoItem: todoItem }, methods: { press: function () { // alert("press") this.list.push(app.$data.inputValue) this.inputValue = '' }, deleteChild: function (childNode) { console.log(childNode) this.list.splice(childNode, 1) } }, watch: { list: function (list, newlist) { this.count = newlist.length }, inputValue: function (oldVal, newVal) { console.log(newVal) } }, computed: { size: { get() { return this.count; }, set(value) { console.log(value) } } } }) </script> </body> </html>
