vue animate.css训练动画案例 列表循环

DOCTYPE html>
html>
    head>
        meta charset="UTF-8">
        title>title>
        link rel="stylesheet" type="text/css" href="css/animate.css"/>
        script type="text/javascript" src="js/vue.js" >script>
        style type="text/css">
            .box li{
                width: 300px;
                line-height: 30px;
                margin: 5px;
                padding: 0 10px;
                border: 1px dashed royalblue;
                list-style: none;            
            }
            .box li:hover{
                background-color: royalblue;    
                color: #fff;
                cursor: pointer;
            }
        style>
    head>
    body>
        div id="app">
            id: input type="text" v-model="id"/>
            name: input type="text" v-model="name"/>
            button @click="add">添加button>
            ul class="box">
                transition-group enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight" >
                    li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.name}}li>
                transition-group>
            ul>
                
        div>
        script type="text/javascript">
            var vm = new Vue({
                el:‘#app‘,
                data:{
                    list:[
                        {id:1,name:‘xiaoxiao‘},
                        {id:2,name:‘maomao‘},
                        {id:3,name:‘dada‘},
                        {id:4,name:‘hehe‘},
                    ],
                    id:‘‘,
                    name:‘‘
                },
                methods:{
                    add(){
                        this.list.push({id:this.id,name:this.name})
                    },
                    del(id){
                        var index = this.list.findIndex(function(item){
                            return item.id == id
                        })
                        this.list.splice(index,1)
                    }
                }
            })
        script>
    body>
html>