So implementieren Sie die Click-Switching-Seite in Vue

Vue implementiert die Methode zum Klicken, um die Seite zu wechseln: 1. Registrieren Sie eine Komponente und verwenden Sie sie im übergeordneten Element. 2. Verwenden Sie v-if und v-else, um die Anzeige und das Ausblenden der Seite zu steuern Zwei Schaltflächen steuern die Änderung des v-if-Werts. 4. Passen Sie das Ereignis an, übergeben Sie den Wert des übergeordneten Elements an das untergeordnete Element und verwenden Sie ihn zur Anzeige auf der Seite, um den Umschalteffekt des Elements besser anzuzeigen Seite.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3, Dell G3-Computer.

Wie wechselt man in Vue mit einem Klick die Seite?

Vue-Fall – Klicken Sie auf die Schaltfläche, um die Seiten zu wechseln.

Verwenden Sie Vue, um einen Seitenwechseleffekt zu erzeugen.

Idee:

• Registrieren Sie eine Komponente und verwenden Sie sie im übergeordneten Element.

• Verwenden Sie v-if und v-else, um das Anzeigen und Ausblenden von Seiten zu steuern.

• Binden Sie Ereignisse an die beiden Schaltflächen (wenn es sich um dieselbe Methode handelt, verwenden Sie Parameter, um zu unterscheiden, auf welche Schaltfläche geklickt wurde; wenn es sich um unterschiedliche Ereignisse handelt, ist die Unterscheidung einfach) und steuern Sie die Änderung des v-if-Werts .

• Passen Sie Ereignisse an, um den Wert des übergeordneten Elements zur Anzeige auf der Seite an das untergeordnete Element zu übergeben und so den Seitenwechseleffekt besser anzuzeigen.

Code der übergeordneten Komponente:

<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 der untergeordneten Komponente:

<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> -->

Empfohlenes Lernen: „vue.js Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Click-Switching-Seite in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!