Vue implementiert ein einfaches Einkaufswagenbeispiel
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung eines einfachen Einkaufswagens als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<Text>
<div id="app">
<Tabelle>
<Kopf>
<tr>
<th></th>
<th>Buchtitel</th>
<th>Veröffentlichungsdatum</th>
<th>Preis</th>
<th>Kaufmenge</th>
<th>Betrieb</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in Büchern' ::key="item">
<td>{{item.id}}</td>
<td>{{Artikelname}}</td>
<td>{{Artikel.Datum}}</td>
<td>{{Artikelpreis*Artikelanzahl | getFinalPrice}}</td>
<td>
<button @click='reduzieren(index)' :disabled='item.count <= 1'>-</button>
{{item.count}}
<button @click='hinzufügen(index)'>+</button>
</td>
<td>
<button @click='removeBtn(index)'>Entfernen</button>
</td>
</tr>
</tbody>
</Tabelle>
<h2 v-if='books!=""'>Gesamtpreis:{{theSumOf | getFinalPrice}}</h2>
<h2 v-else>Der Einkaufswagen ist leer</h2>
</div>
</body>
<script src="../js/vue.min.js"></script>
<Skript>
var app = new Vue({
el: '#app',
Daten: {
Bücher:
{
ID: 1,
Name: 'Computeranwendungen',
Datum: '2006-9',
Preis: 85,00,
Anzahl: 1
},
{
ID: 2,
Name: "Java-Anwendung",
Datum: '2006-9',
Preis: 10,00,
Anzahl: 1
},
{
ID: 3,
Name: „Big Data“,
Datum: '2006-9',
Preis: 85,00,
Anzahl: 1
},
{
ID: 4,
Name: "UI-Designer",
Datum: '2006-9',
Preis: 85,00,
Anzahl: 1
},
],
hinzufügenUnd:0
},
Methoden: {
hinzufügen(index) {
diese.Bücher[index].Anzahl++
},
reduzieren(index) {
diese.Bücher[index].Anzahl--
},
entferneBtn(index) {
dies.books.splice(index, 1)
}
},
Komponenten:
},
berechnet: {
dieSummeVon: Funktion () {
//Die erste Methode der kumulativen Berechnung //lasse Summe = 0
//dieses.books.forEach(item => {
// Summe += parseInt(Artikelpreis)*parseInt(Artikelanzahl)
});
//Summe zurückgeben
//Die zweite Möglichkeit der kumulativen Berechnung //lasse Summe = 0
//für(lass i in diesem.Buch){
//Summe += diese.Bücher[i].Preis*diese.Bücher[i]*Anzahl
}
//Summe zurückgeben
//Die dritte Möglichkeit der kumulativen Berechnung //lasse Summe = 0
//für(let item von this.books){
//Summe += Artikelpreis*Artikelanzahl
//}
//Summe zurückgeben
//Die vierte Methode der kumulativen Berechnung return this.books.reduce(function(preValue,book){
returniere voreingestellten Wert + Buchpreis*Buchanzahl
},0)
}
},
Filter:
getFinalPrice(Preis) {
returniere '￥' + Preis.toFixed(2)
},
}
});
</Skript>
<html>Klicken Sie zum Lernen des Lern-Tutorials zu vue.js bitte auf die Spezialthemen Lern-Tutorial zu vue.js-Komponenten und Lern-Tutorial zu Vue.js-Front-End-Komponenten. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Win10
>>: Eine kurze Analyse verschiedener Möglichkeiten zum Konfigurieren statischer IP-Adressen in RHEL8
Artikel empfehlen
Probleme und Lösungen für MYSQL5.7.17-Verbindungsfehler unter MAC
Das Problem, dass MYSQL5.7.17 unter MAC keine Ver...
Installations-Tutorial für die grüne Version von MySQL 5.7 unter einem 64-Bit-System von Windows 2008
Vorwort In diesem Artikel wird das Installationst...
Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue
Inhaltsverzeichnis Vorwort Kerncode Datei zeigt e...
Beispiele für vertikale Raster und progressiven Zeilenabstand
Neue Fragen Kommen und gehen Sie in Eile. Seit de...
Linux-Konfiguration SSH passwortfreie Anmeldung "ssh-keygen" grundlegende Nutzung
Inhaltsverzeichnis 1 Was ist SSH 2 Konfigurieren ...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...
Detaillierte Erläuterung zur Verwendung des Top-Befehls zur Analyse der Linux-Systemleistung
Einführung in den Linux-Top-Befehl Der Befehl top...
Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen
Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...
So stellen Sie Go-Webanwendungen mit Docker bereit
Inhaltsverzeichnis Warum brauchen wir Docker? Bei...
Lösung für gelegentliche Abstürze des Positionierungs-Hintergrunddienstes unter Linux
Problembeschreibung Im aktuellen Hintergrunddiens...
So isolieren Sie Benutzer in Docker-Containern
Im vorherigen Artikel „UID und GID in Docker-Cont...
Erläuterung des TypeScript-Namespace
Inhaltsverzeichnis 1. Definition und Verwendung 1...
So erstellen Sie eine kontinuierliche Integrationsumgebung mit Jenkins+Maven+Git auf CentOS7
Dieser Artikel verwendet die Bereitstellung eines...
So verwenden Sie das JavaScript-Strategiemuster zum Validieren von Formularen
Inhaltsverzeichnis Überblick Formularvalidierung ...
Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten
Inhaltsverzeichnis Vorwort Rendern setTable-Kompo...