Implementierung eines einfachen Studenteninformationsmanagementsystems auf Basis von VUE

1. Hauptfunktionen

Diese Aufgabe besteht hauptsächlich darin, mit VUE ein einfaches Studenteninformationsmanagementsystem zu implementieren. Die Hauptfunktionen sind:

1. Informationen aller Studenten anzeigen (Standard ist 10)
2. Klicken Sie auf die Schaltfläche, um die Informationen der Studierenden anzuzeigen, deren Matrikel-ID mit einer ungeraden Zahl (oder geraden Zahl) endet.
3. Fügen Sie Studenteninformationen hinzu
4. Erfordert Kommunikation zwischen übergeordneten und untergeordneten Komponenten in VUE

2. Umsetzungsideen

1. Datenverwaltung: Verwenden Sie ein JSON-Array zum Verwalten und Speichern von Daten
2. Studenteninformationen anzeigen: Da es sich bei der Komponente um eine wiederverwendbare Vue-Instanz handelt, wird hier eine untergeordnete Komponente eingeführt (um die Informationen jedes Studenten anzuzeigen) und die Homepage wird als übergeordnete Komponente verwendet. Die Homepage (übergeordnete Komponente) verwendet eine v-for- Schleife, um untergeordnete Komponenten anzuzeigen.
3. Suchen Sie nach Studenten anhand von geraden und ungeraden Zahlen: Durchlaufen Sie das JSON-Array, treffen Sie Urteile und fügen Sie die Informationen, die die Bedingungen erfüllen, in ein neues JSON-Array ein.
4. Verwenden Sie v-if, um auf der Homepage die Studierendeninformationen anzuzeigen, die den Filterkriterien entsprechen.

3. Code-Implementierung

1. Definition der übergeordneten und untergeordneten Komponente

Übergeordnete Komponente: Definieren Sie zunächst die aufzurufende Komponente

Standard exportieren {
 Name: "Hallo Welt",
 Komponenten:
 ChildCom//Aufrufende Komponente},

Unterkomponenten:

Standard exportieren {
 Name: "Kind",
 Requisiten: [
 'Kartenelement'
 ],
 Daten () {
 zurückkehren {
 }
 }
}

2. Kommunikation zwischen Komponenten

Komponenten geben Daten über Props an Unterkomponenten weiter

Übergeordnete Komponente: Verwenden Sie v-for, um das Array mit den Studenteninformationen zu durchlaufen
Durch: card_item (der Name der von der untergeordneten Komponente akzeptierten Daten) = „stu“ (die von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Daten)

<div v-if="flag_danshu==1">
<Child-com id="1" class="list" v-for="(stu,index1) in new_list_danshu" :key="index1" :card_item="stu" >
</Child-com>
</div>
 <div v-else-if="flag_shuangshu==1">
<Child-com id="2" class="list" v-for="(stu,index2) in new_list_shuangshu" :key="index2" :card_item="stu" >
</Child-com>
</div>
 <div v-else-if="flag_all==1">
<Child-com id="3" class="list" v-for="(stu,index3) in stu_list" :key="index3" :card_item="stu">
</Child-com>
</div>

Unterkomponenten:

<div>Name: {{ card_item.name }} </div>
  <div>Studentenausweis: {{card_item.stuId}}</div>
  <div v-if="card_item.gender==1">Geschlecht: Männlich</div>
  <div v-else>Geschlecht: Weiblich</div>

3. Zeigen Sie die Studenteninformationen an, deren Studentenausweis mit einer ungeraden Zahl (oder geraden Zahl) endet (am Beispiel einer ungeraden Zahl).

 danshu (stu_list) {
  diese.neue_liste_danshu=[];
  stu_list.forEach((item) => {
   wenn(item.stuId%2!=0)
   this.new_list_danshu.push(item);//Wenn die Bedingungen erfüllt sind, fügen Sie es dem JSON-Array hinzu, das zum Speichern einzelner Informationen verwendet wird}
  )
  // Alarm (diese.neue_Liste[1]);
  this.flag_all=0; //Alles anzeigen this.flag_danshu=1; //Ungerade Zahlen anzeigen this.flag_shuangshu=0; //Gerade Zahlen anzeigen},

4. Fügen Sie Studenteninformationen hinzu

 hinzufügen:Funktion(){
 var name = document.getElementById("stu_name").value;
 var id = document.getElementById("stu_id").value;
 var Geschlecht = document.getElementById("stu_gender").value;
 wenn(name==''||id==''||gender==''){
  alert('Bitte vervollständigen Sie die Angaben');
  }
  anders{
  var Element = {};
  item.stuId=id;
  Artikelname = Name;
  item.gender=Geschlecht;
  dies.stu_list.push(Artikel);
  alert('Erfolgreich hinzugefügt');
  
  }
 }

4. Effektanzeige

Heim

Informationen zu Studierenden anzeigen, deren Matrikel-ID mit einer ungeraden Zahl endet

Studenteninformationen hinzufügen

V. Fazit

Obwohl es sich nur um eine kleine Demo handelt, stieß ich bei der Fertigstellung dennoch auf viele Probleme, beispielsweise beim Beachten des Unterschieds zwischen V-Show und V-If. Zuerst wollte ich v-show verwenden, um je nach Filterbedingungen unterschiedliche Studenteninformationen anzuzeigen, stellte jedoch fest, dass die Studenteninformationen auch dann gerendert und angezeigt wurden, wenn sie die aktuellen Bedingungen nicht erfüllten. Nachdem ich nach Hilfe gesucht hatte, stellte ich fest, dass wir v-if, v-else-if und v-else verwenden, um mehrere Seiten anzuzeigen, die sich gegenseitig ausschließen, wenn wir sie anzeigen möchten.

Hier sind die Unterschiede zwischen v-show und v-if

v-if rendert die Daten nur, wenn sie als wahr beurteilt werden, und löscht den enthaltenen Code, wenn sie als falsch beurteilt werden. Sofern die Daten nicht erneut gerendert werden, wird v-if erneut beurteilt. Man kann sagen, dass der Anwender dazu neigt, die Daten einmalig zu bearbeiten.
v-show rendert die Daten zuerst, unabhängig von der Beurteilung, aber wenn sie falsch ist, wird der Knoten angezeigt: keine;. Durch Ändern des Datenwerts können die Daten daher angezeigt oder gelöscht werden, ohne dass sie erneut gerendert werden müssen.

Dies ist das Ende dieses Artikels über die Implementierung eines einfachen Studenteninformationsmanagementsystems auf Basis von VUE. Weitere relevante Inhalte zum VUE-Studenteninformationsmanagementsystem finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Dies ist das Ende dieses Artikels über die Implementierung eines einfachen Studenteninformationsmanagementsystems auf Basis von VUE. Weitere relevante Inhalte zum VUE-Studenteninformationsmanagementsystem finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!