1 <!DOCTYPE html>
2 <html lang="en">
3
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 <!--1.导入Vue的包-->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 </head>
12
13 <body>
14 <div id="app">
15 <!-- .prevent 阻止默认行为 -->
16 <a href="" @click.prevent="flag=true">登录</a>
17 <a href="" @click.prevent="flag=false">注册</a>
18
19 <login v-if="flag"></login>
20 <register v-else="flag"></register>
21 </div>
22
23 <script>
24 Vue.component('login',{
25 template:'<h3>登录组件</h3>'
26 })
27
28 Vue.component('register',{
29 template:'<h3>注册组件</h3>'
30 })
31
32 //创建 Vue 实例，得到 ViewModel
33 var vm = new Vue({
34 el:'#app',
35 data:{
36 flag:false
37 },
38 methods:{}
39 });
40 </script>
41 </body>
42 </html>
