Vue implementiert ein einfaches Einkaufswagenbeispiel
|
In diesem Artikel wird der spezifische Code von Vue zur Implementierung eines einfachen Einkaufswagens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Schauen wir uns zunächst den fertigen Effekt an.
CSS-TeilHier gibt es nicht viel zu sagen, nur den Wissenspunkt zu V-Cloak
Tisch{
Rand: 1px durchgezogen #e9e9e9;
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
}
th,td{
Polsterung: 8px 16px;
Rand: 1px durchgezogen #e9e9e9;
Textausrichtung: zentriert;
}
das {
Hintergrundfarbe: #f7f7f7;
Farbe: #5c6b77;
Schriftstärke: 600;
}
[v-Umhang]{
Anzeige: keine;
} HTML-TeilHier sind einige verwendete Vue-Wissenspunkte:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Warenkorb</title>
<link rel="stylesheet" href="style.css" >
</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>Löschen</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in Büchern">
<th>{{item.id}}</th>
<th>{{item.name}}</th>
<th>{{item.date}}</th>
<!--Lösung 1 behält Dezimalpunkte und Währungssymbole bei-->
<!-- <th>{{"￥"+item.price.toFixed(2)}}</th> -->
<!--Lösung 2-->
<!-- <th>{{getFinalPrice(item.price)}}</th> -->
<!--Schema 3-->
<th>{{item.price | showPrice}}</th>
<th>
<button @click="decrement(index)" :disabled="item.count<=0">-</button>
{{item.count}}
<button @click="Erhöhen(index)">+</button>
</th>
<th><button @click="removeHandle(index)">Entfernen</button></th>
</tr>
</tbody>
</Tabelle>
<h2>Gesamtpreis:{{totalPrice | showPrice}}</h2>
</div>
<h2 v-sonst>
Der Warenkorb ist leer</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</html>JS-Teil
const app = new Vue({
el:"#app",
Daten:{
Bücher:
{
Ich würde: 1,
Name:"Einführung in Algorithmen",
Datum:'2006-9',
Preis: 85,00,
Anzahl: 1
},
{
Ich würde: 2,
Name:"Die Kunst der UNIX-Programmierung",
Datum:'2006-2',
Preis: 50,00,
Anzahl: 1
},
{
Ich würde: 3,
Name:"Die Kunst des Programmierens",
Datum:'2008-10',
Preis: 39,00,
Anzahl: 1
},
{
Ich würde: 4,
Name: „《Code-Enzyklopädie》“,
Datum:'2006-3',
Preis: 128,00,
Anzahl: 1
},
]
},
Methoden: {
//Hier verzichten wir auf die Verwendung der Methode „form“ zur Berechnung des Gesamtpreises und verwenden stattdessen die berechnete Eigenschaft, da dies effizienter ist.
// getEndpreis(Preis){
// gebe "￥"+price.toFixed(2) zurück
// },
Inkrement(Index){
diese.Bücher[index].Anzahl++
},
dekrementieren(Index){
diese.Bücher[index].Anzahl--
},
entferneHandle(index){
dies.books.splice(index,1);
}
},
berechnet: {
Gesamtpreis(){
// Option 1: Gewöhnliche for-Schleife // let totalPrice = 0;
// für (lass i = 0; i < this.books.length; i++) {
// Gesamtpreis += this.books[i].price * this.books[i].count
// }
// Gesamtpreis zurückgeben
// Lösung 2: für in
// lass totalPrice = 0;
// für (lass i in diesem.Buch) {
// // console.log(i);//1 2 3 4
// Gesamtpreis += this.books[i].price * this.books[i].count
// }
// Gesamtpreis zurückgeben
// Option 3: für von
// lass totalPrice = 0;
// für (let item von this.books) {
// // console.log(item);//Was wir hier erhalten, ist jedes Objekt im Array// totalPrice += item.price * item.count
// }
// Gesamtpreis zurückgeben
// Lösung 4: Reduzieren
returniere this.books.reduce(function (preValue, book) {
// console.log(book); // Gib jeweils vier Objekte aus return preValue + book.price * book.count
}, 0)
}
},
// Filter:{
zeigePreis(Preis){
returniere "￥"+Preis.toFixed(2)
}
}
})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 von MySQL 8.0.12
>>: So entfernen Sie Wagenrücklaufzeichen aus Text in Linux
Artikel empfehlen
Beheben Sie das Problem, dass der Dienst nicht gestartet werden kann, wenn die dekomprimierte Version von MySQL 5.7.18 Winx64 unter Win7 x64 installiert wird
Heute habe ich mysql-5.7.18-winx64.zip von der of...
Vergleichstabelle chinesischer und englischer Schriftnamen (einschließlich Founder und Arphic)
In CSS-Dateien sehen wir oft, dass einige Schrift...
MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen
Hintergrund: Wenn es in MySQL eine begrenzte Eben...
Java verwendet Apache.POI, um HSSFWorkbook nach Excel zu exportieren
Verwenden Sie HSSFWorkbook in Apache.POI, um nach...
So betreten und verlassen Sie den Docker-Container
1 Starten Sie den Docker-Dienst Zuerst müssen Sie...
Semantik: Ist HTML/XHTML wirklich standardkonform?
<br />Originaltext: http://jorux.com/archive...
So fragen Sie einen Datensatz in MySQL ab, auf welcher Seite der Paging-Seite
Vorwort In der Praxis kann es zu folgendem Proble...
React-Beispielcode zur Parameterübergabe für nicht über- und untergeordnete Komponenten
React ist eine JAVASCRIPT-Bibliothek zum Erstelle...
Nginx-Anti-Crawler-Strategie, um UA am Crawlen von Websites zu hindern
Anti-Crawler-Richtliniendatei hinzugefügt: vim /u...
MySQL-Limit-Leistungsanalyse und -Optimierung
1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...
Zwei Möglichkeiten, das Löschen des Eingabetext-Eingabecaches in HTML zu verhindern
Die meisten Browser speichern die Eingabewerte st...
HTML implementiert problemlos abgerundete Rechtecke
Frage: Wie erreiche ich mit Div+CSS und Positioni...
Erfahren Sie, wie Sie mit Webpack TypeScript-Code verpacken und kompilieren
TypeScript-Bündelung Webpack-Integration Normaler...
Beispielcode zur Implementierung der gleichzeitigen Anforderungssteuerung in JavaScript/TypeScript
Szenario Angenommen, es gibt 10 Anfragen, aber di...
CSS3-Flip-Card-Nummern-Beispielcode
Ich habe heute eine Aufgabe von der Firma erhalte...