Vue-组件切换+第三方动画

cdn 引包

<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js">script>

html 结构

• 要实现点击 ：login、register、updata 来切换相应的组件

<div id="app">
    <a href="#" @click.prevent='comName="login"'>登录a>
    <a href="#" @click.prevent='comName="register"'>注册a>
    <a href="#" @click.prevent='comName="updata"'>更新a>

    
    <transition name="" mode="out-in" enter-active-class="" leave-active-class="bounceInRight" 
    :duration='{enter: 500, leave: 500}'>
      <conponent :is='comName' class="animated">conponent>
    transition>![在这里插入图片描述](https://img-blog.csdnimg.cn/20190203152106210.gif)

  div>

组件

Vue.component('login',{
      template:'
登录组件
'
    })

    Vue.component('register',{
      template:'
注册组件
'
    })

    Vue.component('updata',{
      template:'
更新组件
'
    })

实例化root

new Vue({el: '#aoo',data: {comName:'login'})

ps：

• Vue提供了 component ,来展示对应名称的组件
• component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称

效果