Vue官方文档（29）：多个组件的过渡

最新推荐文章于 2024-08-08 15:28:54 发布

amadeus_liu2

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量95

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127652536

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<template>
 <div >



<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

<button @click="changeComponent">change Component</button>


 </div>


</template>

 <script>
 
 //import Vue from 'vue'


  export default{
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  },
    data() {
      return {
        show: true,
        view: 'v-a',
              }
            },
    methods:{
      changeComponent(){
        if(this.view=='v-a'){
          this.view='v-b';

        }
        else {
          this.view='v-a';

        }
      }

      
    }
  }
      
    </script>

<style >
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
  

</style>