组件切换方式一
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>
原文地址：https://www.cnblogs.com/winter-shadow/p/10205788.html
时间： 2024-11-11 20:21:50