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
Detaillierte Erläuterung der MySQL-Sicherung und -Wiederherstellung
Vorwort: In den vorherigen Artikeln wurde die Ver...
Ubuntu 18.04 installiert MySQL 5.7.23
Ich habe MySQL zuvor problemlos in Ubuntu 16.04 i...
So löschen Sie den in Docker erstellten Container
So löschen Sie den in Docker erstellten Container...
4 Lösungen für CSS-Browserkompatibilitätsprobleme
Frontend ist ein harter Job, nicht nur weil sich ...
Beispiel für das Einrichten einer Whitelist in Nginx mithilfe des Geomoduls
Ursprüngliche Konfiguration: http { ...... Verbin...
Problem beim doppelten Laden, wenn die Seite img src enthält
<br />Wenn die Seite <img src=""...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Windows)
1. Laden Sie die Software herunter 1. Gehen Sie a...
Der DOCTYPE-Modusauswahlmechanismus bekannter Browser
Dokumentumfang Dieser Artikel behandelt den Modus...
5 VueUse-Bibliotheken, die die Entwicklung beschleunigen können (Zusammenfassung)
Inhaltsverzeichnis Welche Dienstprogramme bietet ...
Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt
1. Zunächst müssen wir zwischen der Tomcat-Protok...
Detaillierte Erklärung zum manuellen Bereitstellen einer Remote-MySQL-Datenbank unter Linux
1. Installieren Sie MySQL. Führen Sie den folgend...
Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent
In letzter Zeit muss ich im Projektverlauf häufig ...
Warum verwendet der MySQL-Datenbankindex den B+-Baum?
Bevor wir weiter analysieren, warum der MySQL-Dat...
Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript
*Seite erstellen: zwei Eingabefelder und ein Butt...
Implementierung von MySQL-indexbasierten Stresstests
1. Datenbankdaten simulieren 1-1 Datenbank- und T...