suchen

Heim >Web-Frontend >js-Tutorial >So wechseln Sie die Registerkarten in der Vue2-Registerkarte

So wechseln Sie die Registerkarten in der Vue2-Registerkarte

php中世界最好的语言
php中世界最好的语言Original
2018-03-10 13:53:123163Durchsuche

Dieses Mal werde ich Ihnen die Methode zum Wechseln von Tabs mit Vue2 Tab vorstellen. Was sind die Vorsichtsmaßnahmen, wenn Sie Vue2 Tab zum Wechseln von Tabs verwenden?

Ich habe kürzlich Vue kennengelernt und eine Übung durchgeführt, um mein Verständnis zu vertiefen.

html Die Struktur ist sehr einfach:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>components</title>
    <script src="vue.js"></script>
    <style type="text/css">
        span{
            background:#ccc;
            padding:2px 5px;
            line-height:30px;
            text-align:center;
            cursor:pointer;
        }
        span.active{
            color:#fff;
            background:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <component :is="who"></component>
        <span   :class="{active:active[key]}"   v-for="(item,key) in tab" @click="change(key)">{{item.content}} :{{key}}</span>
    </div>
</body>
</html>

js-Code:

<script type="text/javascript">
    var tem1 = {
        template: "<div>我是components_A组件</div>",
    };
    var tem2 = {
        template: "<div>我是components_B组件</div>",
    };
    var tem3 = {
        template: "<div>我是components_C组件</div>",
    };
    var vue1 = new Vue({
        el: "#app",
        data: {
            who: "com1",　　　　　　　　　　//默认第一次显示;
            active: [true, false, false],//统一管理状态;
            tab: [{
                "content": "tab1",　　　　//tab-span
                "func": "com1"           //仅仅用来存放组件;
            }, {
                "content": "tab2",
                "func": "com2"
            }, {
                "content": "tab3",
                "func": "com3"
            }]
        },
        updated: function() {
            // this.who=null;
        },
        methods: {
            change:function(x){
                
                for(var i=0;i<this.active.length;i++){
                    this.active[i]=false;
                    this.active[x]=true;
                    this.who=this.tab[x].func;
                }
                console.log(this.active);
                // console.log(x);
                this.$set(this.active, 3, 0);
            }
        },
        components: {
            "com1": tem1,
            "com2": tem2,
            "com3": tem3
        }
    })</script>

Ich habe auch zuvor ein Beispiel erstellt, der Code ist chaotisch, dies wird mit v-for;

Einer der wichtigsten Punkte: Vergessen Sie nicht die Durchlaufreihenfolge von v-for value-key;

Punkt 2: Über die Verwendung der globalen API Vue.set();; Es sollte mit aufgerufen werden this.$set nach der Schleife in der Änderungsmethode;

　Ein kleiner Trick, der hier verwendet wird, ist, wie man den Wert des aktiven Status aktualisiert, nachdem er sich geändert hat,

　 Fügen Sie danach ein Element hinzu, this item hat keine Bedeutung, sondern ist nur ein Aufruf. Die $set-Methode teilt Vue mit:

Punkt 3: So referenzieren Sie die Komponente:who; sende sie an ein von v-for durchlaufenes Funktionsattribut ist praktisch;

Tatsächlich wird das Schreiben einer weiteren Variablen unter Daten zum Speichern von com1 com2 com3 keine Wirkung zeigen;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere PHP-bezogene Artikel!

Verwandte Lektüre:

So lösen Sie den CSS-Hack von IE11

VUE So verwenden Sie anmate.css3

Wie Axios einen HTTP-Anfrage-Client basierend auf Promise erstellt

Das obige ist der detaillierte Inhalt vonSo wechseln Sie die Registerkarten in der Vue2-Registerkarte. 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：Ausführliche Erläuterung der Vue 2.0-KomponentenregistrierungNächster Artikel：Ausführliche Erläuterung der Vue 2.0-Komponentenregistrierung

In Verbindung stehende Artikel

Mehr sehen