Vue系列之 => 组件切换

组件切换方式一

 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     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13 
14 <body>
15     <div id="app">
16         <a href="" @click.prevent="flag=true">登录</a>
17         <a href="" @click.prevent="flag=flase">注册</a>
18         <login v-if="flag"></login>
19         <register v-else="flag"></register>
20     </div>
21 
22     <template id="userlogin">
23         <div>
24             <h1>用户登录界面</h1>
25         </div>
26     </template>
27 
28     <template id="userreg">
29         <div>
30             <h1>用户注册界面</h1>
31         </div>
32     </template>
33     <script>
34         Vue.component('login',{
35             template : '#userlogin'
36         });
37 
38         Vue.component('register',{
39             template : '#userreg'
40         })
41 
42         var vm = new Vue({
43             el: '#app',
44             data: {
45                 flag : true
46             },
47             methods: {},
48         })
49     </script>
50 </body>
51 
52 </html>

组件切换方式二(加上动画)

 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     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13 <style>
14     .v-enter,
15     .v-leave-to{
16         opacity: 0;
17         transform: translateX(150px);
18     }
19 
20     .v-enter-active,
21     .v-leave-active{
22         transition: all 0.5s ease;
23     }
24 </style>
25 
26 <body>
27     <div id="app">
28         <a href="" @click.prevent="comName='login'">登录</a>
29         <a href="" @click.prevent="comName='register'">注册</a>
30         <!-- 这是vue提供的 component 元素来展示对应名称的组件 -->
31         <!-- component是一个占位符， :is 属性用来指定要展示的组件的名称 -->
32         <!-- 组件名称是字符串，要用引号包起来 -->
33         <!-- <component :is="'register'"></component> -->
34         <!-- 使用变量的方式方便控制 -->
35         <!-- 设置mode属性值为out-in，动画先出去再进来 -->
36         <transition mode="out-in">
37             <component :is="comName"></component>
38         </transition>
39         <!-- VUE提供的标签 ， component,template,transition, transitionGroup -->
40     </div>
41 
42     <template id="userlogin">
43         <div>
44             <h1>这是登录组件</h1>
45         </div>
46     </template>
47 
48     <template id="userreg">
49         <div>
50             <h1>这是注册组件</h1>
51         </div>
52     </template>
53     <script>
54         Vue.component('login',{
55             template : '#userlogin'
56         });
57 
58         Vue.component('register',{
59             template : '#userreg'
60         })
61 
62         var vm = new Vue({
63             el: '#app',
64             data: {
65                 comName : 'login' //当前component中的 :is 绑定的组件名称
66             },
67             methods: {},
68         })
69     </script>
70 </body>
71 
72 </html>

Vue系列之 => 组件切换

猜你喜欢