共计 495 个字符，预计需要花费 2 分钟才能阅读完成。
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>正文完