Comment implémenter la page de changement de clic dans vue

Vue implémente la méthode consistant à cliquer pour changer de page : 1. Enregistrez un composant et utilisez-le dans l'élément parent ; 2. Utilisez v-if et v-else pour contrôler l'affichage et le masquage de la page ; 3. Liez les événements à ; deux boutons et contrôlez le changement de la valeur v-if ; 4. Personnalisez l'événement, transmettez la valeur de l'élément parent à l'élément enfant et utilisez-le pour l'afficher sur la page, afin de mieux afficher l'effet de commutation du page.

L'environnement d'exploitation de ce tutoriel : système windows7, vue3, ordinateur Dell G3.

Comment changer de page en un clic dans vue ?

Cas Vue - cliquez sur le bouton pour changer de page

Utilisez vue pour créer un effet de changement de page.

Idée :

• Enregistrez un composant et utilisez-le dans l'élément parent.

• Utilisez v-if et v-else pour contrôler l'affichage et le masquage des pages.

• Liez les événements aux deux boutons (s'il s'agit de la même méthode, utilisez des paramètres pour distinguer sur quel bouton vous avez cliqué ; s'il s'agit d'événements différents, il est facile de les distinguer) et contrôlez le changement de la valeur v-if .

• Personnalisez les événements pour transmettre la valeur de l'élément parent à l'élément enfant pour l'afficher sur la page, affichant ainsi mieux l'effet de changement de page.

Code du composant parent :

<template>
    <div>
        <div className="boxs">
            <Page v-if="isShow" :pa="info1" style="background-color: lightpink;width: 200px; height:200px;"></Page>
            <Page v-else id="soecnd" :pa="info2"  style="background-color: lightskyblue;width: 200px; height:200px;"></Page>
            <button @click="fn(1)" >切换至第二个页面</button>
            <button @click="fn(2)">切换至第一个页面</button>
        </div>
    </div>
</template>
<script>
import Page from "./components2/Page.vue";
export default {
    data() {
        return {
            isShow: true,
            info1:"第一个页面",
            info2:"第二个页面"
        }
    },
    components: {
        Page
    },
    methods: {
        fn(i) {
            if (i == 1) {
                this.isShow = false
            } else if (i == 2) {
                this.isShow = true
            }
            console.log(2222)
        }
    }
}
</script>
<style scoped>
/* #soecnd {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
} */
</style>

Code du composant enfant :

<template>
    <div>
        <div class="pageBox">
            {{pa}}
        </div>
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            msg:"11111"
        }
    },
    props:["pa"]
}
</script>
 
<!-- <style>
    /* 如果这里有样式，页面渲染的时候一直是这个样式，父组件引入子组件时的行内样式也改不了样式 */
    .pageBox {
        width: 200px;
        height: 200px;
        background-color: coral;
    }
</style> -->

Apprentissage recommandé : "Tutoriel vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!