标签：charset class har city boot idt str device 登录
组件切换方式一
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>
标签：charset class har city boot idt str device 登录
原文地址：https://www.cnblogs.com/winter-shadow/p/10205788.html
