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
So erstellen Sie eine MySQL-Datenbank (de1) mit Befehlen
1. Verbindung zu MySQL herstellen Format: mysql -...
Detaillierte Erklärung des Vue3-Sandbox-Mechanismus
Inhaltsverzeichnis Vorwort Browser kompilierte Ve...
Grafisches Tutorial zur Installation und Konfiguration der komprimierten Version von MySQL 8.0.11
Installationsmethode für komprimierte MySQL 8.0-P...
Über die MariaDB-Datenbank unter Linux
Inhaltsverzeichnis Über die MariaDB-Datenbank unt...
Anzeigemodus von Elementen in CSS
In CSS werden Element-Tags entsprechend den unter...
So schreiben Sie mithilfe von Filtern transparentes CSS für Bilder
So schreiben Sie mithilfe von Filtern transparente...
Was sind die Verwendungszwecke von Limits in MySQL (empfohlen)
SELECT * FROM Tabellenname Limit m,n; SELECT * FR...
Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung
1. Einfache Konfiguration der dynamischen und sta...
Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“
Übernahme des Geschäfts: Sehen Sie sich die Gehal...
React DVA-Implementierungscode
Inhaltsverzeichnis dva Verwendung von dva Impleme...
Beispiel für die Implementierung eines kreisförmigen Fortschrittsbalkens in Vue
Die Anzeige von Daten ist seit jeher eine Forderu...
Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder
Das im Projekt aufgetretene Layoutproblem unregel...
Springboot+VUE zur Realisierung von Anmeldung und Registrierung
In diesem Artikelbeispiel wird der spezifische Co...
Bereitstellungs- und Installationsdiagramm für die Servervirtualisierung von VMware vSphere 6.0 (detaillierte Schritte)
1. Wichtige Punkte für die frühzeitige Planung de...
JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen
Durchführung von Prozessanalysen (1) Wie rufe ich...