スイッチングコンポーネントを達成するために、VUE二つの方法

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < タイトル>スイッチアセンブリ</ タイトル> 
        < メタのcharset = "UTF-8" > 
    </ ヘッド> 
    < 身体> 
        <！ - ウェイ：V-ifと結合V-他のスイッチは、2つの成分のみを達成することができます- > 
        < divの上記のid = "アプリケーションは" > 
            <！ - ジャンプを抑止、防止するためのイベント修飾子を追加> - 
            < のhref = "" @ click.prevent =を" = trueフラグを" >ログイン</ A > <
            href = "" @ click.prevent "をfalseにフラグに=" = >登録</ A > 
            < ログインV-IF = "フラグに" > </ ログイン> 
            < 登録V-ELSE = ""フラグに> </ 登録> 
        < / DIV > 
        <！ - 第二の方法：スイッチング素子コンポーネントVUEを使用して複数のコンポーネントを実装することができる設け- > 
        < DIV ID = "App2の" > 
                < HREF = "" @のclick.prevent = "comName =ログイン" >ログイン</ > < A
                href = "" @のclick.prevent = "=登録comName" >登録</ A > 
            <！ - 要素VUEは、対応するコンポーネント名を示すために提供- > 
            <！ - コンポーネントは、プレースホルダです。属性の名前は、コンポーネントを指定されている- > 
            < コンポーネント：ある= "comName" > </ 部品> 
        </ DIV > 
    </ ボディ> 
    < スクリプトSRC = "node_modules \ VUE \ distの\ vue.js" > </ スクリプト> 
    < スクリプト> 
        Vue.component（" ログイン"、{ 
            テンプレート：" 登录组件</ H3> <H3> " 
        }）
        Vue.component（" 登録" 、{ 
            テンプレート：" <H3>注册组件</ H3> " 
        }）
        VMはせ=  新しいヴュー（{ 
            EL：" #app " 、
            データ：{ 
                フラグ：偽
            } 
        }）。
        聞かせてVM2 =  新しいヴュー（{ 
            エル：" ＃1 APP2 " 、
            データ：{ 
                comName：ログイン" 
            } 
        }）
    </ スクリプト> 
</ HTML >