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
Eine kurze Analyse der Unterschiede zwischen den häufig verwendeten Anweisungen v-if und v-show von Vue
Inhaltsverzeichnis Vorwort 1.v-show 2.v-wenn 3. D...
MySQL ruft die aktuelle Datums- und Uhrzeitfunktion ab
Holen Sie sich das aktuelle Datum + die aktuelle ...
Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript
Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...
So kopieren Sie eine MySQL-Tabelle
Inhaltsverzeichnis 1.mysqldump Ausführungsprozess...
So passen Sie geplante AT- und Cron-Aufgaben in Linux an
Es gibt zwei Arten von geplanten Tasks im Linux-S...
Lösung für den MySQL-Dienstfehler 1067: Ändern Sie den Pfad der ausführbaren MySQL-Datei
Heute bin ich auf das MySQL-Dienstfehlerproblem 1...
Skin-Change-Lösung basierend auf Vue kombiniert mit ElementUI
Inhaltsverzeichnis Vorne geschrieben Lösung 1: Gl...
Beispielcode für mehrere Elementtabellen, um synchrones Scrollen zu erreichen
Element UI implementiert mehrere Tabellen, die gl...
CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)
Der Code sieht folgendermaßen aus: .Verfahren{ Ra...
Erläuterung des Menüs „Entwicklertools“ in IE8
<br />In diesem Artikel wurden die verschied...
Meta-Tags einfach erklärt
Der META-Tag, umgangssprachlich auch als Tag beze...
JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern
Inhaltsverzeichnis 1. Bedienelemente 1.1. Element...
Eine kurze Diskussion über allgemeine Operationen von MySQL in cmd und Python
Umgebungskonfiguration 1: Installieren Sie MySQL ...
Die Vue-Komponentenbibliothek ElementUI realisiert den Paging-Effekt einer Tabellenliste
ElementUI implementiert das Tutorial zum Paginier...
JavaScript BOM erklärt
Inhaltsverzeichnis 1. BOM-Einführung 1. JavaScrip...