Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann

In diesem Artikel erfahren Sie, wie Sie mit Vue die Warenkorbmenge ändern können. Der spezifische Inhalt ist wie folgt

Effektbild:

Wissenspunkte:

1. Berechnete Eigenschaften
2. Filter

Implementierungscode:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Stil>
    Tisch {
        Rahmen-Zusammenbruch: Zusammenbruch;
        Rahmenabstand: 0;
        Rand: 1px durchgezogen #ccc;
    }
    
    td,
    das {
        Polsterung: 8px 16px;
        Rand: 1px durchgezogen #ccc;
        Textausrichtung: links;
    }
    
    das {
        Hintergrundfarbe: #f7f7f7;
        Farbe: #5c6b77;
    }
</Stil>

<Text>
    <div id="box">
        <div v-if="Bücher.Länge">
            <Tabelle>
                <Kopf>
                    <tr>
                        <th></th>
                        <th>Buchname</th>
                        <th>Veröffentlichungsdatum</th>
                        <th>Preis</th>
                        <th>Kaufmenge</th>
                        <th>Betrieb</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in Büchern">
                        <td>{{item.id}}</td>
                        <td>{{Artikelname}}</td>
                        <td>{{Artikel.Datum}}</td>
                        <td>{{Artikelpreis | toprice}}</td>
                        <td>
                            <button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
                            <button @click='hinzufügen(index)'>+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">Entfernen</button>
                        </td>
                    </tr>
                </tbody>
            </Tabelle>
            <h2>Gesamtpreis: {{getallprice | toprice}}</h2>
        </div>
        <h2 v-else>Sie haben keine Einkaufsinformationen</h2>
    </div>
    <Skript>
        const vm = neuer Vue({
            el: "#box",
            Daten: {
                Bücher: [{
                    ID: 1,
                    Name: „《vue.js tatsächlicher Kampf》“,
                    Datum: "2010.2.4",
                    Preis: 82,00,
                    Tante: 1
                }, {
                    ID: 2,
                    Name: "Javascript-Praxis",
                    Datum: "2010.2.4",
                    Preis: 108,00,
                    Tante: 1
                }, {
                    ID: 3,
                    Name: "《html+css-Übung》",
                    Datum: "2010.2.4",
                    Preis: 42,50,
                    Tante: 1
                }, {
                    ID: 4,
                    Name: "Axios Praxis",
                    Datum: "2010.2.4",
                    Preis: 82,00,
                    Tante: 1
                }, {
                    ID: 5,
                    Name: "jQuery-Praxis",
                    Datum: "2010.2.4",
                    Preis: 65,20,
                    Tante: 1
                }, ]
            },
            Methoden: {
                hinzufügen(index) {
                    diese.Bücher[index].Tante++;
                },
                nach unten(Index) {
                    diese.Bücher[index].Tante--;
                },
                entfernen(index) {
                    dies.books.splice(index, 1)
                },

            },
            berechnet: {
                getallprice() {
                    lass alles = 0;
                    für (sei i = 0; i < this.books.length; i++) {
                        alle += dieses.Buch[i].Preis * dieses.Buch[i].Tante
                    }
                    alles zurückgeben
                }
            },
            Filter:
                toprice(Preis) {
                    returniere '￥' + Preis.toFixed(2)
                },

            }
        })
    </Skript>
</body>

</html>

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:

Vuejs bringt Ihnen Schritt für Schritt bei, einen vollständigen Beispielcode für einen Einkaufswagen zu schreiben
Implementierung einer Warenkorbfunktion basierend auf Vuejs
Vue implementiert Warenkorbfunktion
Vue implementiert einen kleinen Einkaufswagen
Vue realisiert die Warenkorbfunktion des Einkaufszentrums
Vue realisiert die Berechnung des Gesamtpreises des Einkaufswagens
Einfaches Beispiel einer Warenkorbfunktion, implementiert von vuex
Das vue+vant-UI-Framework realisiert die Kontrollkästchenauswahl- und -abwahlfunktion des Einkaufswagens
Detaillierte Erklärung der von Vue.js implementierten Warenkorbfunktion
Vuejs implementiert Warenkorbfunktion

<<: Detaillierte Erläuterung der Rolle und des Funktionsprinzips der MySQL-Master-Slave-Replikation

>>: Tutorial-Diagramm zur Installation einer virtuellen Maschine unter dem Windows-7-Betriebssystem von VMware