1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <template id="tmplogin">
    14.         <h1>登陆组件</h1>
    15.     </template>
    17.     <template id="tmpregister">
    18.         <h1>注册组件</h1>
    19.     </template>
    21.     <div id="app">
    22.         <a href="" @click.prevent="login">登陆</a>
    23.         <a href="" @click.prevent="register">注册</a>
    24.         <component :is="chang"></component>
    25.     </div>
    28.     <script>
    29.         Vue.component('login', {
    30.             template: "#tmplogin"
    31.         })
    32.         Vue.component('register', {
    33.             template: "#tmpregister"
    34.         })
    35.         var vm = new Vue({
    36.             el: '#app',
    37.             data: {
    38.                 chang: "login"
    39.             },
    40.             methods: {
    41.                 login() {
    42.                     this.chang = 'login'
    43.                 },
    44.                 register() {
    45.                     this.chang = 'register'
    46.                 }
    47.             }
    48.         });
    49.     </script>
    50. </body>
    52. </html>

    1.gif