vue two ways to achieve the switching component

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < title > switch assembly </ title > 
        < Meta charset = "UTF-. 8" > 
    </ head > 
    < body > 
        <-! Way: v-if and binding v-else switch can only be achieved two components -> 
        < div the above mentioned id = "App" > 
            <-! Add an event modifier prevent, deter Jump -> 
            < a href = "" @ click.prevent = " = to true Flag " >Log </ A > 
            <A the href = "" @ click.prevent = "= In Flag to false" > Register </ A > 
            < Login V-IF = "In Flag" > </ Login > 
            < Register V-the else = "In Flag" > </ Register > 
        < / div > 
        ! <- Second way: using a switching element component vue provided a plurality of components may be implemented -> 
        < div ID = "App2" > 
                < a the href = "" @ click.prevent = "comName = Login" > Login </a>
                <a the href = "" @ click.prevent = "= Register comName" > Register </ A > 
            ! <- element vue provided to show the corresponding component name -> 
            ! <- Component is a placeholder: is the name of the attribute is designated component -> 
            < component : is = "comName" > </ component > 
        </ div > 
    </ body > 
    < Script the src = "the node_modules \ VUE \ dist \ vue.js" > </ Script > 
    < Script > 
        Vue.component ( " Login ",{
            Template: " <h3> Login Components </ h3> "
        })
        Vue.component("register",{
            Template: " <H3> register component </ H3> "
        })
        let vm = new Vue({
            el:"#app",
            data:{
                flag:false
            }
        });
        let vm2 = new Vue({
            el:"#app2",
            data:{
                comName:"login"
            }
        })
    </script>
</html>