Vier Möglichkeiten zum Wechseln von Registerkarten in VUE

Vier Möglichkeiten zum Wechseln von Registerkarten in VUE

1. Statische Implementierungsmethode:

Effektbild:

Bildbeschreibung hier einfügen

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Interaktion mit der Registerkarte „Ansicht“</title>
  <link rel="stylesheet" href="../css/demo.css" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
</Kopf>
<Text>
<div Klasse="demo_warp" id="mein">
<ul Klasse="tab_tit">
  <li :class="n==1?'active':''" @click="n=1">Titel 1</li>
  <li :class="n==2?'active':''" @click="n=2">Titel 2</li>
  <li :class="n==3?'active':''" @click="n=3">Titel 3</li>
  <li :class="n==4?'active':''" @click="n=4">Titel 4</li>
</ul>
<!-- neirong -->
<div Klasse="tab_con">
  <div v-show="n==1">Inhalt 1</div>
  <div v-show="n==2">Inhalt 2</div>
  <div v-show="n==3">Inhalt 3</div>
  <div v-show="n==4">Inhalt 4</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../js/tab.js" type="text/javascript"></script>
</body>
</html>

CSS

*{
  Rand: 0;
  Polsterung: 0;
  Boxgröße: Rahmenbox;
}
Textkörper,html{
 Höhe: 100%;
}
.demo_warp .tab_tit {
  Anzeige: Flex;
  biegen: 1;
  Rand: .2rem;
}
.demo_warp .aktiv { 
  Farbe: rot;
  Hintergrundfarbe: Kadettenblau;
}
.demo_warp ul li {
  Listenstil: keiner;
  Breite: 23%;
  Textausrichtung: zentriert;
  Hintergrundfarbe: #ccc;
  Marge: 0,1 %;
}
.demo_warp .tab_con {
  Breite: 100 %;
  Höhe: 3rem;
  Rand: 1px durchgezogener RGB (85, 85, 177);
  Textausrichtung: zentriert;
}

js

fenster.onload = funktion(){
  neuer Vue({
    el:'#mein',
      data:{//Responsive Daten ändern sich und die Seite ändert sich ebenfalls n:1
    }
  })

}

2. Die zweite dynamische Simulationsmethode

Der Effekt ist in der Abbildung oben dargestellt: (ausgelassen)
Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Interaktion mit der Registerkarte „Ansicht“</title>
  <link rel="stylesheet" href="../css/demo.css" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
</Kopf>
<Text>
<div Klasse="demo_warp" id="mein">
<ul Klasse="tab_tit">
  <li v-for="(v,i) im Titel" :class="n==i?'active':''" @click="n=i">{{v}}</li>
</ul>
<!-- neirong -->
<div Klasse="tab_con">
  <div v-for="(v,i) in con" v-show="n==i">{{v}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../js/tab.js" type="text/javascript"></script>
</body>
</html>

CSS

*{
  Rand: 0;
  Polsterung: 0;
  Boxgröße: Rahmenbox;
}
Textkörper,html{
 Höhe: 100%;
}
.demo_warp .tab_tit {
  Anzeige: Flex;
  biegen: 1;
  Rand: .2rem;
}
.demo_warp .aktiv { 
  Farbe: rot;
  Hintergrundfarbe: Kadettenblau;
}
.demo_warp ul li {
  Listenstil: keiner;
  Breite: 23%;
  Textausrichtung: zentriert;
  Hintergrundfarbe: #ccc;
  Marge: 0,1 %;
}
.demo_warp .tab_con {
  Breite: 100 %;
  Höhe: 3rem;
  Rand: 1px durchgezogener RGB (85, 85, 177);
  Textausrichtung: zentriert;
}

js

fenster.onload = funktion(){
  neuer Vue({
    el:'#mein',
      data:{//Responsive Daten ändern sich und die Seite ändert sich auch n:0,
     Titel:["Titel 1","Titel 2","Titel 3","Titel 4"],
     con:["Inhalt 1","Inhalt 2","Inhalt 3","Inhalt 4"]
    }
  })
}

3. Die dritte dynamische Datenmethode

Wirkungsdiagramm: (So implementieren Sie die Bildlaufleiste)

Bildbeschreibung hier einfügen

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Interaktion mit der Registerkarte „Ansicht“</title>
  <link rel="stylesheet" href="../css/demo.css" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
</Kopf>
<Text>
<div Klasse="demo_warp" id="mein">
<ul Klasse="tab_tit">
  <li v-for="(v,i) in Listen" :class="n==i?'active':''" @click="n=i">{{v.title}}</li>
</ul>
<!-- nah -->
<div Klasse="tab_con">
  <div v-for="(v,i) in Listen" v-show="n==i">{{v.con}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../js/tab.js" type="text/javascript"></script>
</body>
</html>

CSS

*{
  Rand: 0;
  Polsterung: 0;
  Boxgröße: Rahmenbox;
}
Textkörper,html{
 Höhe: 100%;
}
.demo_warp .tab_tit{
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Leerzeichen: Nowrap;
  Überlauf-y: versteckt;
  Überlauf-x: scrollen; 
   Marge: 1 % 1 % 1 % 0;
}
  ::-webkit-scrollbar{
   Anzeige: keine;
  }
.demo_warp .aktiv { 
  Farbe: rot;
  Hintergrundfarbe: Kadettenblau;
}
.demo_warp ul li {
  Listenstil: keiner;
  Polsterung: 1,2 % 3,2 %;
  Textausrichtung: zentriert;
  Hintergrundfarbe: #ccc;
  Rand links: 1 %;
}
.demo_warp .tab_con {
  Breite: 100 %;
  Höhe: 3rem;
  Rand: 1px durchgezogener RGB (85, 85, 177);
  Textausrichtung: zentriert;
}

js

fenster.onload = funktion(){
  neuer Vue({
    el:'#mein',
      data:{//Responsive Daten ändern sich und die Seite ändert sich auch n:0,
     Listen: [//Es können viele Daten//Array-Objekte in der Form {title:'Titel 1',con:'Inhalt 1'} vorhanden sein.
       {title:'Titel 2',con:'Inhalt 2'},
       {title:'Titel Drei',con:'Inhalt Drei'},
       {title:'Titel 4',con:'Inhalt 4'},
       {title:'Titel Fünf',con:'Inhalt Fünf'},
       {title:'Titel Sechs',con:'Inhalt Sechs'},
       {title:'Titel Sieben',con:'Inhalt Sieben'},
       {title:'Titel 8',con:'Inhalt 8'},
     ]
    }
  })
}

4. Dynamische Implementierungsmethode (Simulation der Hintergrunddatenimplementierung)

Effektbild:

Bildbeschreibung hier einfügen

Code:

<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Interaktion mit der Registerkarte „Ansicht“</title>
  <link rel="stylesheet" type="text/css" href="../css/demo.css" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
</Kopf>
<Text>
<div Klasse="demo_warp" id="mein">
  <ul Klasse="tab_tit">
    <li v-for="(v,i) in Listen" :class="m==i?'active':''" @click="m=i" :key="i.title">{{v.title}}</li>
  </ul>
  <!-- neirong -->
  <div Klasse="tab_con">
    <div v-for="(v,i) in Listen" v-show="m==i" :key="i.con">{{v.con}}</div>
  </div>
  <!-- -----------Dynamische Daten----------- -->
<ul Klasse="tab_tit">
  <li v-for="(Artikel, Index) in Artikelliste" :class="n==index?'active':''" @click="n=index" :key="index">{{Artikel.name}}</li>
</ul>
<!-- neirong -->
<div Klasse="tab_con">
  <div v-for="(Artikel, Index) in Artikelliste" v-show="n==index" :key="index">{{Artikel.Status}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.config.productionTip=false </script>  
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../js/tab.js" type="text/javascript"></script>
</body>
</html>

CSS

*{
  Rand: 0;
  Polsterung: 0;
  Boxgröße: Rahmenbox;
}
Textkörper,html{
 Höhe: 100%;
}
.demo_warp .tab_tit{
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Leerzeichen: Nowrap;
  Überlauf-y: versteckt;
  Überlauf-x: scrollen; 
   Marge: 1 % 1 % 1 % 0;
}
  ::-webkit-scrollbar{
   Anzeige: keine;
  }
.demo_warp .aktiv { 
  Farbe: rot;
  Hintergrundfarbe: Kadettenblau;
}
.demo_warp ul li {
  Listenstil: keiner;
  Polsterung: 1,2 % 3,2 %;
  Textausrichtung: zentriert;
  Hintergrundfarbe: #ccc;
  Rand links: 1 %;
}
.demo_warp .tab_con {
  Breite: 100 %;
  Höhe: 3rem;
  Rand: 1px durchgezogener RGB (85, 85, 177);
  Textausrichtung: zentriert;
}

tab.js

fenster.onload = funktion(){
  neuer Vue({
    el:'#mein',
      data(){//Responsive Daten ändern sich und die Seite ändert sich auch return{
          n:0,
          m:0,
         Listen:[
       {title:'Titel 1',con:'Inhalt 1'},
       {title:'Titel 2',con:'Inhalt 2'},
       {title:'Titel Drei',con:'Inhalt Drei'},
       {title:'Titel 4',con:'Inhalt 4'},
       {title:'Titel Fünf',con:'Inhalt Fünf'},
       {title:'Titel Sechs',con:'Inhalt Sechs'},
       {title:'Titel Sieben',con:'Inhalt Sieben'},
       {title:'Titel 8',con:'Inhalt 8'},
       ], 
        Artikelliste:[]
       }
     },
    Methoden:{
      getList:function(){//this:--[diese Funktion und dieser Timer zeigt auf das Fenster (aber wir möchten, dass dies auf die Vue-Instanz zeigt)]
        var that=this; //Lokale Definition ändert diesen Zeiger //Löschen Sie bei jeder Ausführung dieser Methode vorher das Array, um sicherzustellen, dass das Array bei der weiteren Ausführung des Codes leer ist // this.itemList = [];
        axios({
          Methode: 'get',
          URL: „http://localhost:4000/Liste“
        }).dann(Funktion(res){
            konsole.log(res);
            that.itemList = res.data.result;
        }).catch(Funktion(Fehler){
           konsole.log(Fehler);
        })
      }
    },
    montiert:Funktion(){
         dies.getList();
    },
  })
}

nodeServer.js

 /*
  Connect ist ein Node-Middleware-Framework. Wenn Sie einen HTTP-Verarbeitungsprozess mit einer Abwasserbehandlung vergleichen, ist Middleware wie eine Filterschicht. Jede Middleware schreibt die Anforderungs- bzw. Antwortdaten und den Status im HTTP-Verarbeitungsprozess neu, um bestimmte Funktionen zu erreichen. Middleware ist so etwas wie ein Filter, eine Methode zur Verarbeitung von Anforderungen und Antworten zwischen dem Client und der Anwendung.
 */

//Erstellen Sie einen Vermittler, um den Serviceknoten node.js zu starten  
var connect = require('connect'); //Verbindung erstellen var bodyParser = require('body-parser'); //Body-Parsing wird zum Verarbeiten von JSON-, RAW-, Text- und URL-codierten Daten verwendet.
var Listen = {};
var app = verbinden()
    .use(bodyParser.json()) //JSON-Analyse .use(bodyParser.urlencoded({extended:true}))
   //Die use()-Methode verfügt auch über einen optionalen Pfadstring, der mit dem Anfang der eingehenden Anforderungs-URL übereinstimmt. //Die use()-Methode verwaltet eine Middleware-Warteschlange.use(function(req,res,next){
    //Domänenübergreifende Verarbeitung//Website, die Sie verbinden möchten
    res.setHeader('Access-Control-Allow-origin','*');//Erlaube jeden beliebigen Ursprung//Anforderungsmethoden, die du zulassen möchtest
    res.setHeader('Access-Control-Allow-Methods','CET','POST','OPTIONS','PUT','PATCH','DELETE'); //Erlaube alle Methoden //Anforderungsheader, die du zulassen möchtest
    res.setHeader('Access-Control-Allow-Headers','*');//Jeden Typ zulassen res.writeHead(200,{"Content-Type":"text/plain/xml;charset=utf-8"});//utf-8-Transkodierung next();//nächste Methode ist ein rekursiver Aufruf })
   .use('/Liste',Funktion(erfordern,res,weiter){
     var Daten = {
       "Code": "200",
       "msg":"Erfolg",
       "Ergebnis":[
         {name:"Mobiltelefon",state:"Kauf 1"},
         {name:"bag",state:"Kauf 2"},
         {name:"clothes",state:"Kauf 3"},
         {name:"Computer",state:"Kauf 4"},
         {name:"Elektronische Produkte",state:"Kauf 5"}
      ]
     }
     res.end(JSON.stringify(Daten));
     nächste();
   })
   .verwenden('/list_get',Funktion(req,res,next){
    var Daten = {
      "Code":'200',
      "msg":"Erfolg",
      "Ergebnis":Listen
    }
    res.end(JSON.stringify(Daten));
    nächste();
   })
   .verwenden('/list_add',Funktion(req,res,next){
     wenn(req.method=='POST'){
       Konsole.log(Anforderung.Body.Name);
       Listen.push({name:req.body.name,status:req.body.state,id:index++});
       var data={"code":200,"msg":"erfolgreich"};
       res.end(JSON.stringify(Daten));
     }anders{
       });
     }
     nächste();
   })
   .verwenden('/list_del',Funktion(req,res,next){
    Konsole.log(erforderlich.Body.ID);
    //Listen=Listen.Filter(Liste=>Liste.ID!=req.body.ID);
    für(var i=0;i<lists.length;i++){
      wenn(req.body.id===lists[i].id){
            Listen.splice(i,1);
      }
    }
    konsole.log(Listen);
    var data={"code":200,"msg":"erfolgreich"};
    res.end(JSON.stringify(Daten));
    nächste();
   })
   .listen(4000);
   console.log('Server auf Port 4000 gestartet.');

Plug-in: (Plug-in, das heruntergeladen werden muss)

Bildbeschreibung hier einfügen

1. Starten Sie zuerst den Dienstknoten nodeServer.js (kann nicht geschlossen werden, da sonst die Daten nicht abgerufen werden können)
2. Führen Sie dann die HTML-Seite aus.

Im Projekt aufgetretene Fehler:

Nachdem die v-for-Schleife in vue durchlaufen wurde, wird der aktuelle Inhalt aufgrund des dadurch angezeigten Problems nicht gerendert.

Lösung 1:

Bildbeschreibung hier einfügen

Lösung 2:

Bildbeschreibung hier einfügen

Lösung 3:

Bildbeschreibung hier einfügen

Zusammenfassung: URL: Die Schnittstelle muss ihre eigene Hintergrundschnittstelle schreiben. Dies ist nur eine simulierte Schnittstelle. Die Datei nodeServer.js kann Datentypen in verschiedenen Formaten definieren und auch mehrere erforderliche Typen lokal verschachteln. Sie können es zuerst ausprobieren und dann die Hintergrunddaten anpassen.

Empfohlen zum Erlernen von VUE: Dokumentation::https://cn.vuejs.org/v2/guide/list.html

Damit ist dieser Artikel über die vier Methoden zum Wechseln von VUE-Registerkarten abgeschlossen. Weitere relevante Inhalte zum Wechseln von VUE-Registerkarten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Probleme und Lösungen bei der Verwendung von Vue-Router und V-IF zum Implementieren des Tab-Umschaltens
  • Vue implementiert 3 Möglichkeiten zum Wechseln zwischen Registerkarten und zum Beibehalten des Datenstatus
  • Vue implementiert das Methodenbeispiel der Tab-Routing-Umschaltkomponente
  • Detaillierte Erläuterung der Verwendung von Vue zum Implementieren des Tab-Umschaltvorgangs
  • So wechseln Sie die Registerkarten im Vue-Router

<<:  So finden Sie die IP-Adresse von Raspberry Pi, wenn es ohne Bildschirm mit dem drahtlosen Netzwerk verbunden ist

>>:  Anwendungsszenarien und Entwurfsmethoden für MySQL-Tabellen- und Datenbank-Sharding

Artikel empfehlen

Grafische Erklärung des zugrunde liegenden Prinzips der JavaScript-Bereichskette

Inhaltsverzeichnis Vorwort Umfang 1. Was ist Umfa...

Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben

1. Zuerst müssen Sie den Zielselektor von CSS3 ve...

js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

CSS 3-Animationsbeispiel - Dynamischer Effekt des...

Tutorial zur HTML-Tabellenauszeichnung (10): Zell-Padding-Attribut CELLPADDING

Unter Zellenabstand versteht man den Abstand zwis...

Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL

Einführung Beginnen wir wie immer mit einer Szene...

Untersuchung der drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React

Inhaltsverzeichnis Vorwort Requisiten Kontext Zus...

Was die Website am meisten braucht, ist eine Verbesserung der Erfahrung der Zielgruppe

„Der große Fluss fließt nach Osten, die Wellen sp...

Detaillierte Erklärung zur Verwendung von Standard in MySQL

NULL- und NOT NULL-Modifikatoren, DEFAULT-Modifik...

So verwenden Sie Zeit als Beurteilungsbedingung in MySQL

Hintergrund: Während des Entwicklungsprozesses mü...

Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers

Wenn Sie Ihr MySQL-Anmeldekennwort vergessen, ist...

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Inhaltsverzeichnis Bereitstellung mehrerer Anwend...

So kaufen und installieren Sie Alibaba Cloud-Server

1. Kaufen Sie einen Server Im Beispiel handelt es...

Analyse und Praxis des serverseitigen Rendering-Prinzips von React

Die meisten Leute haben schon einmal vom Konzept ...

SSM implementiert die Chiffretext-Anmeldefunktion für das Kennwort des MySQL-Datenbankkontos

Einführung Unser Unternehmen ist an der Forschung...