关于vue.js: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>