关于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>