组件切换
- 组件切换：不同组件之间切换显示
- 方式一：使用v-if和v-else
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件切换方式一</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <a href=":;" @click.prevent="flag=true">注册</a> <a href=":;" @click.prevent="flag=false">登录</a> <register v-if="flag"></register> <login v-else="flag"></login> </div> <script> Vue.component('register',{ template: '<h3>注册组件</h3>' }) Vue.component('login',{ template: '<h3>登录组件</h3>' }) var vm = new Vue({ el :"#app", data:{ flag: false } }) </script> </body> </html> - 方式二：使用component标签，:is属性可以用来指定要展示的组件的名称。控制了组件名称的变量值切换，就可以控制组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件切换方式二</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <a href=":;" @click.prevent="compName='register'">注册</a> <a href=":;" @click.prevent="compName='login'">登录</a> <component :is="compName"></component> </div> <script> Vue.component('register', { template: '<h3>注册组件</h3>' }) Vue.component('login', { template: '<h3>登录组件</h3>' }) var vm = new Vue({ el :"#app", data:{ compName: 'login' } }) </script> </body> </html>
- 方式一：使用v-if和v-else
- 组件切换动画：直接在<component>标签外加一个<transition>标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件切换动画</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <link rel="stylesheet" href="./css/animate.min.css"> <style> .v-enter, .v-leave-to{ opacity: 0; transform: translateX(150px) } .v-enter-active, .v-leave-active{ transition: all 0.5s ease; } </style> </head> <body> <div id="app"> <a href=":;" @click.prevent="compName='register'">注册</a> <a href=":;" @click.prevent="compName='login'">登录</a> <transition mode="out-in"> <component :is="compName" ></component> </transition> </div> <template id="register"> <div> 用户名：<input type="text" name="" id=""><br/> 密码：<input type="text" name="" id=""><br /> <input type="button" value="注册"> </div> </template> <template id="login"> <div> 用户名：<input type="text" name="" id=""><br /> 密码：<input type="text" name="" id=""><br /> <input type="button" value="登录"> </div> </template> <script> Vue.component('register', { template: '#register' }) Vue.component('login', { template: '#login' }) var vm = new Vue({ el :"#app", data:{ compName: 'login' } }) </script> </body> </html>
