Vue realisiert die Funktion eines Bucheinkaufswagens
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der Bucheinkaufswagenfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt RendernKlicken Sie auf „Erhöhen“, „Verringern“ und „Entfernen“, um die Kaufmenge zu ändern.
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>Buch-Warenkorb</title>
<Stil>
Tisch{
Rand: 1px durchgezogen #e9e9e9;
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
}
th, td {
Polsterung: 8px 16px;
Rand: 1px durchgezogen #e9e9e9;
Textausrichtung: links;
}
das {
Hintergrundfarbe: #f7f7f7;
Farbe: #5c6b77;
Schriftstärke: 600;
}
</Stil>
</Kopf>
<Text>
<div id="app" v-cloak>
<div v-if="Bücher.Länge">
<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="(Artikel, Index) in Büchern">
<td>{{index+1}}</td>
<td>{{Artikelname}}</td>
<td>{{Artikel.Datum}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<!--disabled ist wahr, wenn die Schaltfläche deaktiviert ist -->
<button @click="reduzieren(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="erhöhen(index)">+</button>
</td>
<td><button @click="remove(index)">Entfernen</button></td>
</tr>
</tbody>
</Tabelle>
<h2>Gesamtpreis: {{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>Der Einkaufswagen ist leer</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
const app = new Vue({
el: "#app",
Daten:{
Bücher:
{
Name: 'Einführung in Algorithmen',
Datum: '2021-8-1',
Preis: 85,00,
Anzahl: 1
},
{
Name: 'Die Kunst der UNIX-Programmierung',
Datum: '2021-8-2',
Preis: 69,00,
Anzahl: 1
},
{
Name: 'Programmierperlen',
Datum: '2021-8-3',
Preis: 35,00,
Anzahl: 1
},
{
Name: 'Die Kunst der DOM-Programmierung',
Datum: '2021-8-4',
Preis: 75,00,
Anzahl: 1
},
{
Name: 'Nodejs in einfachen Worten',
Datum: '2021-8-5',
Preis: 105,00,
Anzahl: 1
},
],
},
Methoden:{
reduzieren(index){
diese.Bücher[index].Anzahl--;
},
erhöhen(Index){
diese.Bücher[index].Anzahl++;
},
entfernen(index){
dies.books.splice(index,1);
},
},
berechnet:{
// Die im berechneten Attribut geschriebene Methode kann direkt als Attribut totalPrice(){ verwendet werden
//lass totalPrice = 0;
// 1. Gewöhnliche for-Schleife // for (let i = 0; i < this.books.length; i++) {
// Gesamtpreis += this.books[i].Anzahl * this.books[i].Preis;
// }
// 2. Gewöhnliche for-Schleife mit einfacheren Schritten // for (let i in this.books) {
// Gesamtpreis += this.books[i].Anzahl * this.books[i].Preis;
// }
// 3. für (let Element von this.books)
//für(let item von this.books){
//Gesamtpreis += Artikelanzahl * Artikelpreis;
//}
//Gesamtpreis zurückgeben;
// 4. Schreiben von höherwertigen Funktionen reduzieren
//Gib das Ergebnis direkt zurück, ohne Variablen zu definieren oder zu durchlaufen return this.books.reduce(function(pre, book){
returniere vor + Buchpreis * Buchanzahl;
},0);
},
// Filter:{
zeigePreis(Preis){
return "￥" + Preis.toFixed(2);
}
}
})
</Skript>
</body>
</html>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:
|
<<: Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design
Artikel empfehlen
Die detaillierteste Methode zur Installation von Docker auf CentOS 8
Installieren Sie Docker unter CentOS 8 Offizielle...
Anweisungen zum Bereitstellen von Projekten auf Remotecomputern mithilfe des Publish Over SSH-Plugins in Jenkins
Verwendung des Plugins „Veröffentlichen über SSH“...
So setzen Sie das Passwort zurück, wenn das Ubuntu 18.04-Serverpasswort vergessen oder manipuliert wurde
Kürzlich wurden zwei Konten auf dem Server gehack...
Beispielanalyse der MySQL-Indexabdeckung
Dieser Artikel beschreibt die MySQL-Indexabdeckun...
Detaillierte Erklärung der Überwachungseigenschaften von Vue
Inhaltsverzeichnis Vue-Monitoreigenschaften Was i...
Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung
URL: http://hostname.com/contextPath/servletPath/...
JavaScript Canvas Tetris-Spiel
Tetris ist ein sehr klassisches kleines Spiel, un...
CSS-Eingabe[Typ=Datei]-Stilverschönerung (Eingabe-Upload-Dateistil)
Wirkung: <!doctype html> <html> <K...
Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)
Anaconda ist die beliebteste Python-Plattform für...
Einführung in verschiedene Möglichkeiten zur Einführung von CSS in HTML
Inhaltsverzeichnis 1. CSS-Stile direkt in HTML-Ta...
Das Konzept der MySQL-Tablespace-Fragmentierung und Lösungen für damit verbundene Probleme
Inhaltsverzeichnis Hintergrund Was ist Tablespace...
Der Unterschied zwischen dem Wissen von Frontend-Entwicklern und Künstlern in der Website-Entwicklung
Zusammenfassung: Viele Unternehmen, sogar die meis...
So aktivieren Sie die schreibgeschützte Select-Unterstützung, wenn der Hintergrund bei festgelegtem deaktiviertem Attribut keine Daten lesen kann
Code kopieren Der Code lautet wie folgt: <span...
Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)
I. Überblick Beim Schreiben von HTML-Vorlagen wer...
Vue implementiert grafischen Überprüfungscode
In diesem Artikelbeispiel wird der spezifische Co...