Day3.13组件切换

 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="flag=true">登录</a>
11     <a href="" @click.prevent="flag=false">注册</a>
12 
13     <login v-if="flag"></login>
14     <register v-else="flag"></register>
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             flag:true
27         },
28         methods:{}
29     })
30 </script>
31 </body>
32 </html>