<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../lib/bootstrap.css"> <script src="../lib/vue.js"></script> <style> .v-enter,.v-leave-to{ opacity: 0; transform: translateY(50px); } .v-enter-active,.v-leave-active{ transition: all 0.5s ease; } /* vue动画的style */ </style> </head> <body> <div class="app"> <a href="#" @click.prevent="comName='mycom1'">登录</a> <a href="#" @click.prevent="comName='mycom2'">注册</a> <a href="#" @click.prevent="comName='mycom3'">退出</a> <!-- <mycom1 v-if="flag"></mycom1> <mycom2 v-else="flag"></mycom2> --> <transition mode="out-in"> <!-- //mode定义了切换动画的顺序为先出后进，还有in-out --> <component :is="comName"></component> </transition> <!-- component是一个占位符，‘：is’用来指定要展示组件的名称 --> <!-- transition包含的区域为要进行切换的多组件 --> </div> <template id="cmp1"> <div> <h1>我是组件一</h1> </div> </template> <!-- 定义组件结构 --> <template id="cmp2"> <div> <h1>俺是组件2222哟</h1> </div> </template> <template id="cmp3"> <div> <h1>我退出啦</h1> </div> </template> <script> Vue.component('mycom1',{ template:'#cmp1' }) //注册组件名称 Vue.component('mycom2',{ template:'#cmp2' }) Vue.component('mycom3',{ template:'#cmp3' }) var vm = new Vue({ el:'.app', data:{ flag:true, comName:'mycom1' } }) </script> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
