suchen

Heim >Web-Frontend >js-Tutorial >Einführung in zwei Möglichkeiten zur Implementierung des Komponentenwechsels in Vue (mit Code)

Einführung in zwei Möglichkeiten zur Implementierung des Komponentenwechsels in Vue (mit Code)

不言
不言Original
2018-08-08 11:54:574562Durchsuche

Dieser Artikel bietet Ihnen eine Einführung in die beiden Möglichkeiten, den Komponentenwechsel in Vue zu implementieren (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Mehrere Möglichkeiten, Komponenten in Vue zu wechseln

Methode 1: v-if 和 v-else 结合使用实现切换

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script rel="script" src="js/vue-2.4.0.js"></script></head><body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登陆</a>
        <a href="" @click.prevent="flag=false">注册</a>

        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div><script>
    *<!--定义登录组件-->*
    Vue.component(&#39;login&#39;,{
        template :&#39;<h3>登陆组件</h3>&#39;
    });

     *<!--定义注册组件-->*
    Vue.component(&#39;register&#39;,{
        template :&#39;<h3>注册组件</h3>&#39;
    });

     *<!--创建Vue实例-->*
    var vm = new Vue({
       el : &#39;#app&#39;,
       data :{
           flag : true,
       },
       methods:{},
    });</script></body></html>

Laufergebnisse: 点击登录或注册 进入相应的组件模块

Einführung in zwei Möglichkeiten zur Implementierung des Komponentenwechsels in Vue (mit Code)

Einführung in zwei Möglichkeiten zur Implementierung des Komponentenwechsels in Vue (mit Code)

Hinweis: Verwenden Sie v-if und v-else, um einen Wechsel zwischen den beiden Komponenten zu erreichen . Umschalten mehrerer Komponenten

Methode 2: 使用Vue提供的component元素实现组件切换

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script rel="script" src="js/vue-2.4.0.js"></script></head><body>
    <div id="app2">
        <!-- 链接修改comName的值-->
        <a href="" @click.prevent="comName = &#39;login&#39; ">登陆2</a>
        <a href="" @click.prevent="comName = &#39;register&#39; ">注册2</a>

        <!--
            component 是一个占位符，  :is  属性，可以用来指定要展示的组件的名称
        -->
        <component :is=" comName "></component>
    </div><script>
    //组件名称是 字符串
    Vue.component(&#39;login&#39;,{
        template :&#39;<h3>登陆组件</h3>&#39;
    })

    Vue.component(&#39;register&#39;,{
        template :&#39;<h3>注册组件</h3>&#39;
    })    //实例
    var vm2 = new Vue({
        el : &#39;#app2&#39;,
        data :{
            comName : &#39;login&#39;,//当前 component 中的 :is 帮i的那个的组件的名称
        },
        methods:{},
    });</script></body></html>

Diese Methode kann das Umschalten mehrerer Komponenten definieren, bitte beachten Sie Ja, 组件名称要对应

Empfohlene verwandte Artikel:

Wie der Knotenserver die Erfassung von Douban-Daten (Code) implementiert

Vue implementiert Nachahmungsfunktionen von Registerkarte „Toutiao-Startseite“

Das obige ist der detaillierte Inhalt vonEinführung in zwei Möglichkeiten zur Implementierung des Komponentenwechsels in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie erreicht der Knotenserver die Erfassung von Douban-Daten (Code)?Nächster Artikel：Wie erreicht der Knotenserver die Erfassung von Douban-Daten (Code)?

In Verbindung stehende Artikel

Mehr sehen