1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <a href="" @click.prevent="comName='login'">登录</a> 11 <a href="" @click.prevent="comName='register'">注册</a> 12 <!-- vue 提供了component来展示对应名称的组件 --> 13 <!-- component 是一个占位符， ：is 属性 可以用来指定要展示的组件的名称--> 14 <component :is="comName"></component> 15 </div> 16 <script> 17 Vue.component('login',{ 18 template:'<h3>登录组件</h3>' 19 }); 20 Vue.component('register',{ 21 template:'<h3>注册组件</h3>' 22 }); 23 const vm = new Vue({ 24 el:'#app', 25 data:{ 26 comName:'login'//当前component 中的 :is 绑定的组件的名称 27 }, 28 methods:{} 29 }) 30 </script> 31 </body> 32 </html>