Vue.js-Framework implementiert Warenkorbfunktion
|
In diesem Artikel wird der spezifische Code des Vue.js-Frameworks zur Implementierung des Einkaufswagens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script src="../lib/vue.min.js"></script>
</Kopf>
<Text>
<div id="app" style="position: relative;links: 30%">
<table cellpadding="10">
<Kopf>
<th><input type="checkbox" v-model="cb" v-on:click="allSelect">Alles auswählen</th>
<th>Name</th>
<th>Stückpreis</th>
<th>Menge</th>
<th>Betrag</th>
<th>Betrieb</th>
</thead>
<tbody>
<tr v-for="x in info">
<td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>
<td>{{x.name}}</td>
<td>{{x.Preis}}</td>
<td><input Typ="Zahl" v-Modell="x.num" min="0" Stil="Breite: 50px;Textausrichtung: Mitte" v-on:Klick="Anzahl(x)" v-on:Ändern="Anzahl(x)"></td>
<td>{{x.total}}</td>
<td><button v-on:click="del(x)">Löschen</button></td>
</tr>
</tbody>
</Tabelle>
<Br>
<p>Gesamtbetrag: {{alle}}</p>
</div>
<Skript>
var vm = neuer Vue({
el: "#app",
Daten: {
alle: 0,
cb: falsch,
Informationen: [{
bol: falsch,
Name: "iphone7",
Preis: 6000,
Zahl: 1,
Gesamt: 6000
}, {
bol: falsch,
Name: "Honor 6x",
Preis: 1200,
Zahl: 1,
gesamt: 1200
}, {
bol: falsch,
Name: "Dell-Laptop",
Preis: 4000,
Zahl: 1,
Gesamt: 4000
}]
},
Methoden: {
//Stückpreis berechnen Anzahl: function(obj) {
für(var i = 0; i < this.info.length; i++) {
//
wenn(diese.info[i] == obj) {
diese.info[i].total = obj.preis * obj.num;
}
//Wenn ausgewählt, berechne den Gesamtpreis if(obj.bol) {
dies.allSelect();
}
}
},
//löschen del: function(obj) {
diese.info.splice(diese.info.indexOf(obj), 1)
dies.allCount();
},
//Einzelauswahlzeichen: function() {
dies.allCount();
},
//Alles auswählenallSelect: function() {
für(var i = 0; i < this.info.length; i++) {
dies.info[i].bol = dies.cb;
}
dies.allCount();
},
//Gesamtpreis berechnen allCount: function() {
//Jedes Mal, wenn Sie den Gesamtpreis berechnen, müssen Sie this.all = 0 löschen;
für(var i = 0; i < this.info.length; i++) {
//Berechnen Sie das ausgewählte Produkt if(this.info[i].bol) {
dies.alles += dies.info[i].total;
}
}
}
}
})
</Skript>
</body>
</html>Effektbild:
Zum Lernen und Lesen weiterer Artikel können Sie auf „Lern-Tutorial zu Vue.js-Front-End-Komponenten“ klicken. Um Tutorials zu Vue.js-Komponenten zu erhalten, klicken Sie bitte auf das spezielle Lern-Tutorial zu Vue.js-Komponenten. Weitere Vue-Lern-Tutorials finden Sie im Spezialthema „Vue-Praxis-Tutorial“. 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:
|
<<: Detaillierte Erläuterung der Installation, Bereitstellung und Verwendung von Nginx unter Linux
>>: MySQL startet langsames SQL und analysiert die Ursachen
Artikel empfehlen
Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)
Kürzlich erhielten wir von einem Kunden eine Bitt...
Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten
Das img-Tag in XHTML ist ein sogenanntes selbstsc...
js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung
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...
So erhalten Sie die Schnittmenge/Differenz/Vereinigung zweier Mengen in MySQL
Typische MySQL-Szenarien: Schnittmenge und Differ...
Docker exec führt mehrere Befehle aus
Der Befehl „Docker Exec“ kann Befehle in einem la...
Praxis der Verwendung von Tinymce Rich Text zum Anpassen von Symbolleistenschaltflächen in Vue
Inhaltsverzeichnis Installieren Sie die Deklarati...
So verbessern Sie die MySQL Limit-Abfrageleistung
Bei MySQL-Datenbankoperationen hoffen wir immer, ...
Grundlegendes Prozessmanagement und Analyse der Umgebungszusammensetzung bei Linux-Betrieb und -Wartung
Inhaltsverzeichnis 1. Grundlegender Überblick übe...
Get/Delete-Methode zum Übergeben von Array-Parametern in Vue
Wenn Front-End und Back-End interagieren, müssen ...
Natives JS zum Erzielen eines nahtlosen Karusselleffekts
Native js realisiert den Karusselleffekt (nahtlos...
So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux
Dieser Artikel beschreibt, wie man über Docker ei...
VUE führt die Implementierung der Verwendung von G2-Diagrammen ein
Inhaltsverzeichnis Über G2 Chart verwenden Vollst...
Tutorial zur manuellen Installation und Konfiguration von mysql8.0.11 winx64
Lassen Sie mich zunächst über meinen Alltag sprec...
Grundlegendes Nutzungs-Tutorial zur IPTABLES-Firewall unter LINUX
Vorwort Für Produktions-VPS mit öffentlicher IP w...