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 Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue
Inhaltsverzeichnis V-Modell .sync Der Unterschied...
Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]
Dieser Artikel beschreibt die Linux-Benutzer- und...
Problem „Nicht genügend Speicher“ und Lösung, wenn Docker Elasticsearch startet
Frage Nicht genügend Speicher, wenn Docker Elasti...
Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL
1 Ursache Nachdem das Projekt die Datenbank migri...
So leiten Sie den Nginx-Verzeichnispfad um
Wenn der Pfad nach dem Domänennamen auf andere Ve...
VScode Remote SSH-Remote-Bearbeitung und -Debugging von Code
Die neueste Insider-Version von Visual Studio Cod...
Detaillierte Erläuterung des Mysql Self-Join-Abfragebeispiels
Dieser Artikel beschreibt die Mysql-Self-Join-Abf...
Detaillierte Erklärung des Vue-Elements plus Mehrsprachenumschaltung
Inhaltsverzeichnis Vorwort Wie wechselt man zwisc...
Vuex implementiert einen einfachen Einkaufswagen
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy
Beim Konfigurieren des Nginx-Reverse-Proxys könne...
Zusammenfassung der Updates und gefundenen Probleme des Docker Consul-Containerdienstes
Inhaltsverzeichnis 1. Container-Service-Update un...
Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags
Was ist ein Mata-Tag? Das <meta>-Element li...
Einführung in die Generierung von Kubernetes-Zertifikaten mit OpenSSL
Kubernetes unterstützt drei Arten der Authentifiz...
Bestimmen Sie die Richtung der Mauseingabe basierend auf CSS
In einer Front-End-Technologiegruppe sagte ein Gr...
So ändern Sie die SSH-Portnummer in der Centos8-Umgebung
Inhaltsverzeichnis Vorwort Start Vorwort Die Stan...