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
JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung
In diesem Artikel wird der spezifische Code von J...
Mehrere Möglichkeiten zur Implementierung eines 0-ms-Verzögerungstimers in js
Inhaltsverzeichnis WarteschlangeMikrotask asynchr...
So implementieren Sie die Paging-Funktion des MyBatis-Interceptors
So implementieren Sie die Paging-Funktion des MyB...
Spezifische Schritte zur Verwendung des Vant-Frameworks im WeChat-Applet
Inhaltsverzeichnis 1. Öffnen Sie das Projektverze...
Detaillierte Erläuterung verschiedener Möglichkeiten zum Exportieren von Daten in Mysql
Es gibt viele Gründe für den Export von MySQL-Dat...
Docker Gitlab+Jenkins+Harbor erstellt einen persistenten Plattformbetrieb
CI/CD-Übersicht CI-Workflow-Design Das Git-Codeve...
So konfigurieren Sie Umgebungsvariablen in einer Linux-Umgebung
JDK-Downloadadresse: http://www.oracle.com/techne...
So verwenden Sie MySQL „group by“ und „order by“ gemeinsam
Angenommen, es gibt eine Tabelle: Belohnung (Belo...
So konfigurieren Sie die MySQL Master-Slave-Replikation unter Windows
Die MySQL Master-Slave-Replikation ermöglicht die...
Grafische Erklärung des MySQL-Abfragecaches
Inhaltsverzeichnis 1. Prinzipübersicht Query Cach...
Verwenden Sie reines CSS, um einen pulsierenden Loader-Effekt-Quellcode zu erstellen
Effektvorschau Klicken Sie rechts auf die Schaltf...
Ein Artikel zum Verständnis von Operatoren in ECMAScript
Inhaltsverzeichnis Unäre Operatoren Boolesche Ope...
Detaillierte Erklärung der HTML-Formularelemente (Teil 1)
HTML-Formulare werden verwendet, um verschiedene ...
Fallerklärung für den Nginx-Reverse-Proxy zu Go-FastDFS
Hintergrund go-fastdfs ist ein verteiltes Dateisy...
HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
In diesem Artikel werden hauptsächlich Beispiele ...