Vue，组件切换-方式1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="../js/vue.js"></script>
 9 </head>
10 <body>
11     <div id="app">
12         <!-- prevent 阻止默认行为 -->
13         <a href="" @click.prevent="flag=true">登录</a>
14         <a href="" @click.prevent="flag=flash">注册</a>
15 
16         <login v-if="flag"></login>
17         <register v-else="flag"></register>  
18     </div>
19 
20           
21 
22 </body>
23 </html>
24 <script>
25 
26     Vue.component('login', {
27         template: '<h3>登录组件</h3>'
28     })
29 
30     Vue.component('register', {
31         template: '<h3>注册组件</h3>'
32     })
33 
34     var vm = new Vue({
35         el: '#app',
36         data:{
37             flag: true,
38         },
39         methods: {
40             
41         },
42     })
43 
44 </script>
Vue，组件切换-方式1

Vue，组件切换-方式1

效果图
