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
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen
Rahmenstil Die Eigenschaft „Border-Style“ gibt an...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 18.04.5 LTS Server Edition
1. Ubuntu Server 18.04.5 LTS-Systeminstallation U...
Navicat importiert CSV-Daten in MySQL
In diesem Artikel erfahren Sie, wie Sie mit Navic...
Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx
Inhaltsverzeichnis Bereitstellung mehrerer Anwend...
Ursachen und Lösungen für Verzögerungen bei der MySQL Master-Slave-Replikation
Inhaltsverzeichnis Ein kurzer Überblick über die ...
VPS erstellt Offline-Download-Server (nach der Ära der Netzwerkfestplatten)
Motivation Aus Lerngründen habe ich einen VPS-Die...
Detaillierte Erklärung zur Konfiguration des Keepalived-Protokolls auf einem anderen Pfad in CentOS7
Keepalived-Installation: cd <keepalived_source...
MySQL: MySQL-Funktionen
1. Integrierte Funktionen 1. Mathematische Funkti...
Mehrere Methoden und Vor- und Nachteile der Implementierung eines dreispaltigen Layouts mit CSS
Vorwort Das dreispaltige Layout ist, wie der Name...
CSS Sticky Footer Mehrere Implementierungen
Was ist „Sticky Footer“ Der sogenannte „Sticky Fo...
VirtualBox installiert die virtuelle Maschine CentOS7 und Erweiterungstools (Bild und Text)
Das Computersystem ist: win7 Dieser Artikel basie...
Verwenden von Vue zum Implementieren einer Timerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen
Während des Projekts habe ich begonnen, die js re...
Vue-Projekt @change mehrere Parameter, um mehrere Ereignisse zu übergeben
Erstens gibt es nur ein Änderungsereignis. change...
Implementierung von Linux-Dateisystemvorgängen
In dieser Lesenotiz werden hauptsächlich die Vorg...