如果想设置多个属性之间的切换效果，可以用mode（mode="in-out"：先显示要显示的再隐藏要隐藏的。mode="out-in"：和前面的相反）：

    
    
    
    
    
    


    
        
            hello
            bye
        
        切换
    
    
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        });
    

组件动画也是可以的（不需要上面的不同值的key）：

    
    
    
    
    
    


    
        
            hello
            bye
        
        切换
    
    
        Vue.component("child1", {
            template: "
child1
"
        });
        Vue.component("child2", {
            template: "
child2
"
        });
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        });
    

动态组件的实现方法：

    
    
    
    
    
    


    
        
            //通过动态组件的方式实现：
            
        
        切换
    
    
        Vue.component("child1", {
            template: "
child1
"
        });
        Vue.component("child2", {
            template: "
child2
"
        });
        var vm = new Vue({
            el: "#root",
            data: {
                type: "child1"
            },
            methods: {
                handleClick: function() {
                    this.type = this.type == "child1" ? "child2" : "child1"
                }
            }
        });
    

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流