master

分支 (1)

管理

管理

master

front-end-development-learning
/
组件3-组件切换.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <a href="" @click.prevent="flag=true">登录</a>
            <a href="" @click.prevent="flag=false">注册</a>
            <login v-if="flag"></login>
            <register v-else="flag"></register>

            <a href="" @click.prevent="comName='login'">login</a>
            <a href="" @click.prevent="comName='register'">register</a>
            <component :is="comName"></component>


            <!--动态组件-->
            <button v-for="tab in tabs" :key="tab" @click="currentTabComponent=tab">{{tab}}</button>
            <component :is="currentTabComponent"></component>

        </div>

    </body>
    <template id="temp1">
        <div>
            <h1>登录组件</h1>
        </div>
    </template>
    <template id="temp2">
        <div>
            <h1>注册组件</h1>
        </div>
    </template>
    <template id="aa">
        <div>
            <h1>aa</h1>
        </div>
    </template>
    <template id="bb">
        <div>
            <h1>bb</h1>
        </div>
    </template>
    <template id="cc">
        <div>
            <h1>cc</h1>
        </div>
    </template>
    <script>
        const aa = {
            template:'#aa',
        }
        const bb = {
            template:'#bb',
        }
        const cc = {
            template:'#cc',
        }
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                msg:'hello vue.js',
                flag:false,
                comName:'login',
                tabs:['aa','bb','cc'],
                currentTabComponent:'aa'
            },
            methods:{

            },
            components:{
                login:{
                    template:'#temp1',
                    data:function(){
                        return{

                        }
                    },
                    methods:{

                    }
                },
                register:{
                    template:'#temp2',
                    data:function(){
                        return{

                        }
                    },
                    methods:{

                    }
                },
                aa,bb,cc
            }
        })
    </script>
</html>