如何在 vuejs 中转换组件页面？

Question

我想将组件更改为徽标图像和表单，当我单击徽标时，它会转换为表单。 阅读文件很简单，但我做不到。不知道是不是少了点什么。

索引.vue：

    <template>
      <v-app>
        <transition name="fade" mode="out-in">
        <Logo @click="show = !show" key="logo" />
        <Form key="form" v-if="show"  />
        </transition>
      </v-app>
    </template>
    
    <script>
    export default {
      components:{
        Logo: () => import('./components/Logo-Image'),
        Form: () => import('./components/Image-Form'),
      }
    }
    </script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

徽标.vue：

<template>
    <v-container fill-height fluid>
        <v-row align="center"
            justify="center">
            <v-col
            align="center"
            justify="center">
                <a><v-img src="/img/logo.png" max-height="360" max-width="570"></v-img></a>
            </v-col>
        </v-row>
    </v-container>
</template>

Form.vue

       <template>
 <v-container fill-height fluid>
            <v-row align="center"
                justify="center">
                <v-col
                align="center"
                justify="center">
                    <v-card
                        max-width="300"
                    >
                        <v-img
                        src="/img/logo.png"
                        max-height="360"
                        max-width="520"
                        >
                        </v-img>
                        <v-card-text>
                            <v-text-field
                                label="CPF"
                                
                            >
                            </v-text-field>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </template>

Answer 1

您必须在徽标中添加数据和 v-if

 <template>
  <v-app>
    <transition name="fade" mode="out-in">
    <Logo @click="show = !show" v-if="!show" key="logo" />
    <Form key="form" v-if="show"  />
    </transition>
  </v-app>
</template>

<script>
export default {
  data:{
    return(){
       show: false
    }
  },
  components:{
    Logo: () => import('./components/Logo-Image'),
    Form: () => import('./components/Image-Form'),
  }
}
</script>

Answer 2

在您的 Index.vue 中没有 data ()，您需要保存 show 的值：

<script>
export default {
  components: {
    Logo: () => import('./components/Logo-Image'),
    Form: () => import('./components/Image-Form')
  },
  data () {
    return {
      show: true
    }
  }
}
</script>

然后，如果您希望表单在点击时替换徽标，则必须像这样切换它们：

<transition name="fade">
  <Logo v-if="show" @click="show = !show" key="logo" />
  <Form v-else key="form" />
</transition>

示例：

new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="fade">
    <div v-if="show" @click="show = !show" key="logo">Logo</div>
    <div v-else key="form">Form</div>
  </transition>
</div>