vue.js学习笔记--if-else完成选择注册/登陆的组件切换

<div id="app">
<a href="" v-on:click.prevent="flag=true">login</a>
<a href="" v-on:click.prevent="flag=false">register</a>

<login v-if="flag"></login>
<register v-else="flag"></register>
</div>

<script>

Vue.component('login',{
　　template:'<h3>login</h3>'
　　})
Vue.component('register',{
　　template:'<h3>register</h3>'
　　})
var vm = new Vue({
　　el: '#app',
　　data:{
　　　　flag:true
　　}
})

 

缺陷：数量限制为2

 

改进版：

 <div id="app">
        <a href="" v-on:click.prevent="flag='login'">login</a>
        <a href="" v-on:click.prevent="flag='register'">register</a>
​
        <!--  <login v-if="flag"></login>
            <register v-else="flag"></register> -->
​
        <component v-bind:is="flag"></component>
    </div>
​
    <script>
        Vue.component('login', {
            template: '<h3>login</h3>'
        })
        Vue.component('register', {
            template: '<h3>register</h3>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                flag: 'login'
            }
        })
    </script>

 

再改进：加上动画效果

 <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(20px);
        }
​
        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }
    </style>
    <div id="app">
​
        <a href="" v-on:click.prevent="flag='login'">login</a>
        <a href="" v-on:click.prevent="flag='register'">register</a>
​
        <transition mode="out-in">
            <component v-bind:is="flag"></component>
        </transition>
    </div>
​
    <script>
        Vue.component('login', {
            template: '<h3>login</h3>'
        })
        Vue.component('register', {
            template: '<h3>register</h3>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                flag: 'login'
            }
        })
    </script>

 

其中里面的mode是指动画切换的模式，先原来的那个离开了，新的那个才进来