vue-组件切换

最新推荐文章于 2022-09-01 16:53:23 发布

原创最新推荐文章于 2022-09-01 16:53:23 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-组件切换

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在Vue.js中使用不同的方法进行组件切换，并实现平滑的过渡动画效果。通过实例展示了两种组件切换方式：一种适用于两个组件之间的切换，另一种适用于多个组件间的切换。同时，详细解释了如何利用Vue的transition组件来添加过渡动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>-->
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap.min.css"/>
    <script src="lib/moment-with-locales.min.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform:translateX(200px);
        }
        .v-enter-active,
        .v-leave-active
       {
             transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
    </style>
</head>
<body>
    <!--组件切换方式1：适用于两个间的切换-->
    <div id="app">
        <a  href="" @click.prevent="flag=true">登录</a>
        <a  href="" @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
     <!--组件切换方式2：适用于多个间的切换-->
    <div id="app2">
        <a  href="" @click.prevent="comName='login'">登录</a>
        <a  href="" @click.prevent="comName='register'">注册</a>
        <a  href="" @click.prevent="comName='play'">逛逛</a>
        <transition mode="out-in">
            <!--component是一个占位符，is绑定组件的名称-->
            <component :is="comName"></component>
        </transition>
        
    </div>
<script>
    var login = Vue.extend({
        template:'<h3>登录</h3>' 
    });
   Vue.component('login',login);
   Vue.component('register',{
       template:'<h3>注册</h3>'
   });
    Vue.component('play',{
       template:'<h3>逛逛</h3>'
   });
    var app = new Vue({
        el:"#app",
        data:function(){
            return {
                flag:true
            }
        },
        methods:{

        }
    });
    var app2 = new Vue({
        el:"#app2",
        data:function(){
            return {
                comName:'login'
            }
        },
        methods:{

        }
    });
</script>
</body>
</html>