VUE组件切换方式

1、v-if & v-else和标识符flag

html（ < template > ）：

<div id="app">
  <input type="button" value="toggle" @click="flag=!flag">
  <my-com1 v-if="flag"></my-com1>
  <my-com2 v-else="flag"></my-com2>
</div>

js:

export default {
  name: 'name',
  return data: {
    flag: true
  },
  methods: {}
}

2、:is

<component :is="组件名"/>

3、设置切换动画

<template>
  <transition mode="out-in">
    <component :is="comName"></component>
  </transition>
</template>

<style>
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(150px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }  
</style>