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 HTML-Startseite
<!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>
<link rel="stylesheet" href="/css/index.css" >
</Kopf>
<Text>
<div id="app">
<div v-if="Bücher.Länge != 0">
<Tabelle>
<Kopf>
<tr>
<th></th>
<th>Buchtitel</th>
<th>Veröffentlicht wie geplant</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>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="Erhöhen(index)">+</button>
</td>
<td><button @click="removeHandle(index)">Entfernen</button></td>
</tr>
</tbody>
</Tabelle>
<h2>Der Gesamtpreis beträgt: {{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>Der Einkaufswagen ist leer</h2>
</div>
<script src="/js/vue.js"></script>
<script src="/js/index.js"></script>
</body>
</html>CSS Code
* {
Rand: 0;
Polsterung: 0;
}
Tisch {
Rand: 100px 0 0 100px;
Rand: 1px durchgezogen #e9e9e9;
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
}
Mai,
td {
Polsterung: 8px 16px;
Rand: 1px durchgezogen #e9e9e9;
Textausrichtung: links;
}
das {
Hintergrundfarbe: #f7f7f7;
Farbe: Schwarz;
Schriftstärke: 6000;
}
h2 {
Breite: 500px;
Rand links: 100px;
}
Taste {
Polsterung: 5px;
}JS-Code (Vue)
const app = new Vue({
el:"#app",
Daten:{
Bücher:
{
Ich würde: 1,
Name: 'Einführung in Algorithmen',
Datum:'2019-2',
Preis: 85,00,
Anzahl: 1
},
{
Ich würde: 2,
Name:'Computergrundlagen',
Datum:'2019-2',
Preis:95.00,
Anzahl: 1
},
{
Ich würde: 3,
Name: „C++ Erweiterte Sprache“,
Datum:'2019-2',
Preis:89.00,
Anzahl: 1
},
{
Ich würde: 4,
Name: „《Kompilierungsprinzipien》“,
Datum:'2019-2',
Preis: 77,00,
Anzahl: 1
},
]
},
Methoden:{
dekrementieren(Index){
diese.Bücher[index].Anzahl--
},
Inkrement(Index){
diese.Bücher[index].Anzahl++
},
entferneHandle(index){
dies.books.splice(index,1)
}
},
berechnet:{
Gesamtpreis(){
let finalPrice = 0
für(lass i = 0; i < this.books.length; i++){
finalPrice += diese.Bücher[i].Preis * diese.Bücher[i].Anzahl
}
Endpreis zurückgeben
}
},
Filter:
zeigePreis(Preis){
returniere '￥' + Preis.toFixed(2)
}
}
})Ergebnisse der Operation
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:
|
<<: Einige Fragen zu Hyperlinks
>>: HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN
Artikel empfehlen
Detaillierte Erklärung zum Kompilieren und Installieren von MySQL 5.6 auf CentOS und zum Installieren mehrerer MySQL-Instanzen
--1. Erstellen Sie eine neue Gruppe und einen neu...
HTML-Kontrollkästchen Klicken Sie auf den Beschreibungstext, um den Status auszuwählen/abzuwählen
Da das Kontrollkästchen bei der Webentwicklung kle...
Vue implementiert Beispielcode zum Ziehen von Dateien vom Desktop auf eine Webseite (kann Bilder/Audio/Video anzeigen)
Wirkung Wenn Sie es verwenden, optimieren Sie bit...
Beispiele für neue Selektoren in CSS3
Struktureller (Position) Pseudoklassenselektor (C...
Detaillierte Erklärung der neuen CSS-Eigenschaft display:box
1. Anzeige:Box; Wenn Sie diese Eigenschaft für ei...
Wann sollte eine Website Anzeigen schalten?
Als ich vor kurzem mit einem Internet-Veteranen ü...
Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24
MySQL ist das beliebteste relationale Datenbankma...
Einführung in Fork in Multithreading unter Linux
Inhaltsverzeichnis Frage: Fall (1) Fork vor dem E...
Verwenden von Keras zur Beurteilung von SQL-Injection-Angriffen (Beispielerklärung)
In diesem Artikel wird das Deep-Learning-Framewor...
MySQL5.7.03 Ersatz der höheren Version durch MySQL 5.7.17 Installationsprozess und Lösungen für gefundene Probleme
1. Wie installiert man? 1. [Ausführen] -> [cmd...
Lösen Sie das Problem, dass bei der Set-Operation kein NULL gefunden wird, nicht wie bei MySQL
Eine interessante Entdeckung: Es gibt eine Tabell...
Der Prozess des SSH-Dienstes basierend auf der Schlüsselauthentifizierung im Linux-System
Wie wir alle wissen, ist SSH derzeit das zuverläs...
So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst
Konfigurieren Sie die Webseitenkomprimierung, um ...
Analyse der Vor- und Nachteile von festen, fließenden und flexiblen Webseiten-Layouts
Es gibt eine Frage, die Webdesigner schon lange b...
Detaillierte Erläuterung von Kompatibilitätsproblemen und Lösungen zum Festlegen der maximalen und minimalen Breite in der Tabelle
Festlegen der Eigenschaften für Mindest- und Maxi...