//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <button v-on:click="toggleCom">
       Toggle
    </button>
    <div class="ab">
      <transition name="fade" mode="in-out">
        <!--<p v-show="show">i am show</p>-->
        <div :is="currentVue" v-show="show" ></div>
      </transition>

    </div>
  </div>
</template>

<script>
import Hello from './components/Hello'
import Apple from "./components/apples"
import Banana from "./components/bananas"
export default {
   data(){
     return {
         show:true,
          currentVue:Apple
     }
   },
  name: 'app',
  components: {
    Hello,
    Apple,
    Banana
  },
  computed:{
    totalPrice(){
      return this.$store.state.totalPrice
    }
  },
  methods:{
    toggleCom:function () {
      if(this.currentVue==='Apple'){
        this.currentVue='Banana'
      }else{
        this.currentVue='Apple'
      }
    }
  }
}
</script>

<style>
  .fade-enter-active,.fade-leave-active{
    transition: all 1.5s;
  }
  .fade-enter{
    transform: translateX(500px);
    opacity: 0;
  }
  .fade-leave-active{
    transform: translateX(-500px);
      opacity: 0;
  }
</style>

//banans,apple.vue
<template>
  <div>
      <h1>{{msg}}</h1>
      <button>+</button>
  </div>
</template>
<script>
  export default{
    data(){
      return {
          msg:"i am apples",
          price:5
      }
    },
</script>