Eine einfache Möglichkeit, alle Funktionen des Einkaufswagens in Vue zu implementieren
Die Hauptfunktionen sind wie folgt:
Das Wirkungsdiagramm sieht wie folgt aus:
Da es viele Funktionen gibt, werden wir nicht einzeln darüber sprechen. Lassen Sie uns zunächst über die Logik mehrerer Hauptfunktionen (Hinzufügen, Löschen, Ändern und Abfragen) sprechen und schließlich den gesamten Code einfügen. Schauen wir uns zunächst das Hinzufügen von Produktfunktionen an //Binden wir zunächst eine Schaltfläche, um das Ereignis anzuzeigen. Nach dem Klicken auf „Hinzufügen“ wird ein Popup-Fenster angezeigt <button type="button" @click="xian">Hinzufügen</button>
//return definiert einen dis-Standardwert von false
xian() {
wenn (!this.dis == false) {
this.dis = falsch
} anders {
this.dis = wahr
}
},
Klicken Sie dann im Popup-Fenster auf „Änderung bestätigen“ und binden Sie ein Ereignis ein, um die Produktinformationen hinzuzufügen.
<button type="button" @click="tian">Zum Hinzufügen bestätigen</button>
//Pusht die hinzuzufügenden Produktinformationen in ein neues Array und schließt das Popup-Fenster nach dem Hinzufügen von tian() {
wenn (dieser.name == "" || dieses.land == "" || dieser.preis == "") {
alert("Produktinformationen dürfen nicht leer sein!")
return false
} anders {
dies.shopPings.push({
Name: dieser.Name,
Land: dieses.Land,
Preis: dieser.Preis,
zählen: dies.zählen,
})
}
dieser.name = "",
dieses.Land = "",
dieser.Preis = "",
dies.Anzahl = ""
this.dis = falsch
},
Nachdem ich das Produkt hinzugefügt hatte, stellte ich plötzlich fest, dass die Produktinformationen falsch geschrieben waren! ! ? ? Keine Panik, ich zeige Ihnen, wie Sie die Funktion ändern können Definieren Sie wie üblich zuerst eine Schaltfläche, um das Anzeigeereignis zu binden, und binden Sie dann das Anzeigeereignis. Mit Ausnahme des Ereignisnamens ist es dasselbe wie oben hinzugefügt. Schauen wir uns die Bestätigungsänderungsfunktion direkt an.
//Button-Bindungsereignis definieren <button type="button" @click="xiugai">Änderung bestätigen</button>
//Ändere die Produktinformationen im Warenkorb und schließe das Popup-Fenster nach der Änderung. xiugai() {
konsole.log(diese.int)
let index = diese.int
console.log(dieser.Name, dieser.Preis, diese.Anzahl, )
dieser.shopPings[index].name = dieser.name
dieser.shopPings[index].preis = dieser.preis
dieser.shopPings[index].county = dieser.county
dies.shopPings[index].count = dies.count
this.dis1 = falsch
},
Nach dem Hinzufügen von Änderungen schreiben wir eine Löschung Definieren Sie ein Schaltflächenbindungsereignis, übergeben Sie einen Indexwert und schließlich löscht Splice ein Element basierend auf dem Index.
Definieren Sie ein Schaltflächenbindungsereignis, übergeben Sie einen Indexwert und löscht schließlich ein Element gemäß dem Index <button @click="del(index)">Löschen</button>
del(index) {
dies.shopPings.splice(index, 1);
},
Das Leeren des Warenkorbs ist relativ einfach. Dazu muss nach dem Klick auf den Button das Array auf Leer gesetzt werden.
alldel() {
this.shopPings = []
},
Zum Abschluss noch ein Blick auf die Abfragefunktion im Warenkorb //Setzen Sie den Eingabewert im Gegenzug //Definieren Sie ein Eingabefeld, binden Sie den Wert, legen Sie das Tastaturereignis „Enter“ fest und binden Sie das Suchereignis <input type="text" placeholder="Bitte geben Sie den Namen des abzufragenden Produkts ein" v-model="input_value" @keyup.13="search"> Weitere Einzelheiten finden Sie in den Hinweisen.
//Lassen Sie uns zunächst eine Entscheidung treffen. Wenn das Suchfeld leer ist, wird eine Meldung angezeigt, dass es nicht leer sein darf. //Holen Sie sich dann den Namen jedes Elements im Array für die Suche. Wenn es keinen solchen Produktnamen gibt, wird eine Meldung angezeigt, dass es kein solches Produkt gibt. //Filtern Sie abschließend den Array-Filter und finden Sie das entsprechende Produkt, indem Sie den im Suchfeld eingegebenen Produktnamen mit dem Produktnamen im Einkaufswagen vergleichen. search() {
wenn (!dieser.Eingabewert) {
return alert('Bitte Inhalt eingeben')
}
Wenn (
this.shopPings.every((v) => {
v.name.indexOf(dieser.Eingabewert) == -1
})
) {
dieser.Eingabewert = ''
Rückgabewarnung('Kein solches Produkt')
}
this.shopPings = this.shopPings.filter((v) => {
v.name.replace(dieser.Eingabewert, dieser.Eingabewert)
gibt v.name.indexOf(diesen.Eingabewert) zurück != -1
})
}
Vollständiger Code:
<Vorlage>
<div Klasse="shopCar">
<Kopfzeile>
<button type="button" @click="delSelect">Stapellöschung</button>
<button type="button" @click="alldel">Warenkorb leeren</button>
<button type="button" @click="xian">Hinzufügen</button>
<button type="button" @click="jiang">Sortieren</button>
<input type="text" placeholder="Bitte geben Sie den Namen des Produkts ein, nach dem Sie suchen möchten" v-model="input_value" @keyup.13="search">
<div Klasse="xiu" v-show="dis1">
<Eingabetyp="Text" Platzhalter="Name" v-Modell="Name">
<input type="text" placeholder="Preis" v-model="Preis">
<input type="text" placeholder="Menge" v-model="Anzahl">
<input type="text" placeholder="Herkunft" v-model="Landkreis">
<button type="button" @click="xiugai">Änderungen bestätigen</button>
</div>
<div Klasse="Hinzufügen" v-show="dis">
<Eingabetyp="Text" Platzhalter="Name" v-Modell="Name">
<input type="text" placeholder="Preis" v-model="Preis">
<input type="text" placeholder="Menge" v-model="Anzahl">
<input type="text" placeholder="Herkunft" v-model="Landkreis">
<button type="button" @click="tian">Zum Hinzufügen bestätigen</button>
</div>
</header>
<Haupt>
<ul>
<li>
<p><Eingabetyp="Kontrollkästchen" v-Modell="allesGeprüft">
Alles auswählen</p>
<p>Name</p>
<p>Herkunft</p>
<p>Menge</p>
<p>Stückpreis</p>
<p>Zwischensumme</p>
<p>Betrieb</p>
</li>
<li v-for="(Artikel,Index) in ShopPings" :Schlüssel="Index">
<p><input type="checkbox" v-model="item.checked">{{item.id}}</p>
<p>{{item.name}}</p>
<p>{{item.countrty}}</p>
<p><button type="button" @click="hinzufügen(Element)">+</button>
<Eingabetyp="Text" v-Modell="Artikel.Anzahl" Stil="Breite:20px">
<button type="button" @click="entfernen(Element)">-</button>
</p>
<p>{{Artikelpreis}}</p>
<p>{{Artikel.Preis*Artikel.Anzahl |Suffix}}</p>
<p>
<button type="button" @click="xiu(index)"> Ändern</button>
<button @click="del(index)">Löschen</button>
</p>
</li>
</ul>
</main>
<Fußzeile>
<p>Gesamt {{state.sum |suffix}}</p>
</Fußzeile>
</div>
</Vorlage>
<style scoped lang="scss">
.shopCar {
Breite: 1000px;
Rand: 2px tief schwarz;
Rand: 100px automatisch;
Überlauf: automatisch;
Kopfzeile {
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
Breite: 600px;
Höhe: 27px;
Überlauf: versteckt;
.hinzufügen {
Breite: 400px;
Hintergrund: #e4e1e1;
Position: absolut;
links: 39%;
oben: 40%;
Eingabe {
Anzeige: Block;
Rand: 20px automatisch;
}
Taste {
Anzeige: Block;
Rand: 0 automatisch;
}
}
.xiu {
Breite: 400px;
Hintergrund: #e4e1e1;
Position: absolut;
links: 39%;
oben: 40%;
Eingabe {
Anzeige: Block;
Rand: 20px automatisch;
}
Taste {
Anzeige: Block;
Rand: 0 automatisch;
}
}
}
hauptsächlich {
// Höhe: 400px;
Rand oben: 10px;
ul {
li {
Höhe: 78px;
Rahmen unten: 2px tief schwarz;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
P {
schweben: links;
Breite: 140px;
Höhe: 27px;
Rand: 2px tief schwarz;
Textausrichtung: zentriert;
}
}
}
}
Fußzeile {
Höhe: 50px;
Rand oben: 13px;
Zeilenhöhe: 50px;
}
}
</Stil>
<Skript>
const shopData = [{
Ausweis: "",
Name: "Schuhe",
Land: "Shanxi",
Anzahl: 1,
Preis: 800,
},
{
Ausweis: "",
Name: "Schrank",
Land: "Peking",
Anzahl: 1,
Preis: 3200,
},
{
Ausweis: "",
Name: "Lippenstift",
Land: "Hebei",
Anzahl: 2,
Preis: 200,
},
{
Ausweis: "",
Name: "Hamburger",
Land: "Henan",
Anzahl: 2,
Preis: 200,
},
]
Standard exportieren {
//Filter: {
Suffix(Wert) {
lass Preis = Zahl(Wert)
gibt `￥${price.toFixed(2)}` zurück
//Füge vor dem Betrag ein ￥-Symbol ein und definiere den Dezimalpunkt als zweistellig}
},
berechnet: {
//Alles auswählen allChecked: {
erhalten() {
const checkeds = this.shopPings.filter((Artikel) => Artikel.geprüft)
Rückgabewert: checkeds.length === this.shopPings.length
},
setze(Zustand) {
// console.log(Status)
this.shopPings.map((item) => {
item.checked = Status
Rücksendeartikel
})
}
},
//Zwischensummenberechnung totalPrice: function () {
var gesamt = 0;
für (var i = 0; i < this.checkList.length; i++) {
var item = diese.checkList[i];
Gesamtsumme += Artikelpreis * Artikelanzahl;
}
gibt total.toLocaleString() zurück;
},
//Berechnen Sie den Gesamtpreis des ausgewählten Artikels state() {
const checkeds = this.shopPings.filter((Artikel) => Artikel.geprüft)
const geprüft = geprüfte.Länge === this.shopPings.Länge
const Summe = geprüfte.Reduce((a, b) => {
gebe a + b.Anzahl * b.Preis zurück;
}, 0)
zurückkehren {
Anzahl: geprüfte Länge,
Summe
}
},
},
Daten() {
zurückkehren {
Einkaufen: [],
dis: false, //Übermittlung bestätigen dis1: false, //Änderungs-ID bestätigen: "",
Name: "", //Name Preis: "", //Stückpreis Anzahl: "", //Menge Land: "", //Herkunft Eingabewert: "", //Im Abfragefeld eingegebener Wert}
},
montiert() {
Fenster.fetch("/").then(() => {
this.shopPings = shopData.map((item) => {
item.checked = falsch
Rücksendeartikel
})
})
},
Methoden: {
//Produkt hinzufügen xian() {
wenn (!this.dis == false) {
this.dis = falsch
} anders {
this.dis = wahr
}
},
//Hinzufügen von tian() bestätigen {
wenn (dieser.Name == "" || dieser.Landkreis == "" || dieser.Preis == "") {
alert("Produktinformationen dürfen nicht leer sein!")
return false
} anders {
dies.shopPings.push({
Name: dieser.Name,
Land: dieses.Land,
Preis: dieser.Preis,
zählen: dies.zählen,
})
}
dieser.name = "",
dieses.Land = "",
dieser.Preis = "",
dies.Anzahl = ""
this.dis = falsch
},
//Produkt löschen del(index) {
dies.shopPings.splice(index, 1);
},
//Das ausgewählte Element löschen delSelect() {
this.shopPings = this.shopPings.filter((item) => {
wenn (!item.checked) {
Rücksendeartikel
}
})
},
//alles löschen alldel() {
this.shopPings = []
},
//Kauf reduzieren remove(data) {
wenn (Datenanzahl > 0) {
Datenanzahl--
}
wenn (Datenanzahl === 0) {
Daten.geprüft = false
}
},
//Kauf hinzufügen add(data) {
Datenanzahl++
},
//Produkt xiu(i) ändern {
dies.int = i
wenn (!this.dis1 == false) {
this.dis1 = falsch
} anders {
this.dis1 = wahr
}
},
// Änderung bestätigen xiugai() {
konsole.log(diese.int)
let index = diese.int
console.log(dieser.Name, dieser.Preis, diese.Anzahl, )
dieser.shopPings[index].name = dieser.name
dieser.shopPings[index].preis = dieser.preis
dieser.shopPings[index].county = dieser.county
dies.shopPings[index].count = dies.count
this.dis1 = falsch
},
//Absteigende Reihenfolgejiang() {
this.shopPings.sort((a, b) => {
// Sortieren basierend auf Daten return a.price - b.price;
})
},
suchen() {
wenn (!dieser.Eingabewert) {
return alert('Bitte Inhalt eingeben')
}
Wenn (
this.shopPings.every((v) => {
v.name.indexOf(dieser.Eingabewert) == -1
})
) {
dieser.Eingabewert = ''
Rückgabewarnung('Kein solches Produkt')
}
this.shopPings = this.shopPings.filter((v) => {
v.name.replace(dieser.Eingabewert, dieser.Eingabewert)
gibt v.name.indexOf(diesen.Eingabewert) zurück != -1
})
}
}
}
</Skript>
ZusammenfassenDies ist das Ende dieses Artikels über die Verwendung von Vue zur Implementierung aller Funktionen eines Einkaufswagens. Weitere Informationen zur Verwendung von Vue zur Implementierung von Einkaufswagenfunktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: mysql installer community 8.0.16.0 Installations- und Konfigurations-Grafik-Tutorial
>>: So führen Sie .sh-Dateien im Linux-System aus
Artikel empfehlen
Zeigen Sie die abhängigen Bibliotheken von so oder ausführbaren Programmen unter Linux an
Anzeigen der abhängigen Bibliotheken von so oder ...
Erfahrung in der Lösung von Tomcat-Speicherüberlaufproblemen
Vor einiger Zeit habe ich Testern eine Produktver...
Detaillierte Erläuterung der Konstruktion der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation
MySQL Master-Slave-Einrichtung Die Einstellungen ...
Lösung für das Problem mit verstümmeltem MySQL-Code unter Linux
Das Projekt interagiert mit dem Server, greift üb...
JavaScript-Grundlagen dieser Verweisung
Inhaltsverzeichnis Das Verfahren Im Objekt Verste...
Beispielcode zur Implementierung der Anmeldung mit Bestätigungscode in der SMS-API in Node
1. Node-Server einrichten + Datenbankverbindung D...
So übermitteln Sie den Wert eines deaktivierten Formularfelds in einem Formular Beispielcode
Wenn ein Formularfeld in einem Formular deaktivier...
MySQL 8.0.22 Zip-komprimierte Paketversion (kostenlose Installation) Download, Installations- und Konfigurationsschritte detailliert
Inhaltsverzeichnis Der erste Schritt besteht dari...
Einige Erfahrungen zum Aktivieren von HTTPS
Da sich die heimische Netzwerkumgebung immer weit...
Zusammenfassung der wichtigsten Wissenspunkte zur MySQL-Abfrageoptimierung
Vorwort Abfrageoptimierung ist nichts, was über N...
Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen
Während des Projekts habe ich begonnen, die js re...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 unter Windows 10
Grafisches Tutorial zur Installation und Konfigur...
Zusammenfassung häufig verwendeter Zeit-, Datums- und Konvertierungsfunktionen in MySQL
Dieser Artikel fasst hauptsächlich einige häufig ...
Installations- und Konfigurationsmethode für komprimierte MySQL Community Server-Pakete
Da ich heute MySQL installieren wollte, bin ich a...
Beispielcode für die HTML-Formatierung von JSON
Ohne weitere Umschweife werde ich den Code direkt...