Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann
|
In diesem Artikel erfahren Sie, wie Sie mit Vue die Warenkorbmenge ändern können. Der spezifische Inhalt ist wie folgt Effektbild:
Wissenspunkte: 1. Berechnete Eigenschaften Implementierungscode:
<!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>Dokument</title>
</Kopf>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Stil>
Tisch {
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
Rand: 1px durchgezogen #ccc;
}
td,
das {
Polsterung: 8px 16px;
Rand: 1px durchgezogen #ccc;
Textausrichtung: links;
}
das {
Hintergrundfarbe: #f7f7f7;
Farbe: #5c6b77;
}
</Stil>
<Text>
<div id="box">
<div v-if="Bücher.Länge">
<Tabelle>
<Kopf>
<tr>
<th></th>
<th>Buchname</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">
<td>{{item.id}}</td>
<td>{{Artikelname}}</td>
<td>{{Artikel.Datum}}</td>
<td>{{Artikelpreis | toprice}}</td>
<td>
<button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
<button @click='hinzufügen(index)'>+</button>
</td>
<td>
<button @click="remove(index)">Entfernen</button>
</td>
</tr>
</tbody>
</Tabelle>
<h2>Gesamtpreis: {{getallprice | toprice}}</h2>
</div>
<h2 v-else>Sie haben keine Einkaufsinformationen</h2>
</div>
<Skript>
const vm = neuer Vue({
el: "#box",
Daten: {
Bücher: [{
ID: 1,
Name: „《vue.js tatsächlicher Kampf》“,
Datum: "2010.2.4",
Preis: 82,00,
Tante: 1
}, {
ID: 2,
Name: "Javascript-Praxis",
Datum: "2010.2.4",
Preis: 108,00,
Tante: 1
}, {
ID: 3,
Name: "《html+css-Übung》",
Datum: "2010.2.4",
Preis: 42,50,
Tante: 1
}, {
ID: 4,
Name: "Axios Praxis",
Datum: "2010.2.4",
Preis: 82,00,
Tante: 1
}, {
ID: 5,
Name: "jQuery-Praxis",
Datum: "2010.2.4",
Preis: 65,20,
Tante: 1
}, ]
},
Methoden: {
hinzufügen(index) {
diese.Bücher[index].Tante++;
},
nach unten(Index) {
diese.Bücher[index].Tante--;
},
entfernen(index) {
dies.books.splice(index, 1)
},
},
berechnet: {
getallprice() {
lass alles = 0;
für (sei i = 0; i < this.books.length; i++) {
alle += dieses.Buch[i].Preis * dieses.Buch[i].Tante
}
alles zurückgeben
}
},
Filter:
toprice(Preis) {
returniere '￥' + 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:
|
<<: Detaillierte Erläuterung der Rolle und des Funktionsprinzips der MySQL-Master-Slave-Replikation
Artikel empfehlen
Tomcat-Domänennamenzugriff mit mehreren Ports und Konfiguration zum Aktivieren der GZIP-Komprimierungsmethode
1. Zusätzlich zum Standardport 8080 versuchen wir...
Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil
Aufgrund der Anforderungen des Projekts habe ich ...
So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update
Vor Kurzem hat das Unternehmen damit begonnen, al...
Detaillierte Erläuterung der Konfiguration der Alibaba Cloud-Sicherheitsregeln
Vor zwei Tagen habe ich das Double 11-Shopping-Fe...
Führen Sie die Schritte zum Erstellen einer Laravel-Entwicklungsumgebung mit Docker aus
Vorwort In diesem Artikel verwenden wir Docker, u...
W3C Tutorial (4): W3C XHTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren
Dieser Artikel erläutert anhand von Beispielen di...
js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster
In diesem Artikel wird der spezifische Code von j...
MySQL-Datenbankindizes und -Transaktionen
Inhaltsverzeichnis 1. Inhaltsverzeichnis 1.1 Konz...
Lösung für das img-Tag-Problem unter IE10
Finden Sie das Problem Ich habe vorher eine einfa...
JavaScript zur Implementierung eines einfachen Einkaufsformulars
In diesem Artikel wird der spezifische JavaScript...
Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript
1. Konzept Sie alle sind Attribute des Elements u...
Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3
Die Verwendung von „Computed“ in vue3. Da vue3 mi...
CSS-Einstellung Div-Hintergrundbild-Implementierungscode
Das Hinzufügen einer Hintergrundbildsteuerung zu ...
Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.
In diesem Artikelbeispiel wird der spezifische Co...