vue零基础开发027——Vue中的列表过渡

作者: 文朝明 | 来源:发表于2019-12-11 16:33 被阅读0次

<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中的列表过渡</title>
    <script src="./vue.js"></script>
    <style>
        .v-enter, v-leave-to {
            opacity: 0
        }

        .v-enter-active, v-leave-active {
            transition: opacity 1s
        }
    </style>
</head>
<body>
    <div id="root">
        <transition-group>
            <div v-for="item of list" :key="item.id">
                {{item.title}}
            </div>
        </transition-group>
        <button @click="handleBtnClick">add</button>
    </div>
    <script>
        var count = 0;
        var vm = new Vue({
            el: "#root",
            data: {
                list: []
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push({
                        id: count++,
                        title: 'hellow world'
                    })
                }
            }

        })

    </script>
</body>
</html>

Vue中的列表过渡