Vue realisiert die Funktion eines Bucheinkaufswagens

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der Bucheinkaufswagenfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Rendern

Klicken Sie auf „Erhöhen“, „Verringern“ und „Entfernen“, um die Kaufmenge zu ändern.

Code

<!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>Buch-Warenkorb</title>
    <Stil>
        Tisch{
            Rand: 1px durchgezogen #e9e9e9;
            Rahmen-Zusammenbruch: Zusammenbruch;
            Rahmenabstand: 0;
        }
        th, td {
            Polsterung: 8px 16px;
            Rand: 1px durchgezogen #e9e9e9;
            Textausrichtung: links;
        }
        das {
            Hintergrundfarbe: #f7f7f7;
            Farbe: #5c6b77;
            Schriftstärke: 600;
        }
    </Stil>
</Kopf>
<Text>
    <div id="app" v-cloak>
        <div v-if="Bücher.Länge">
            <Tabelle>
                <Kopf>
                    <tr>
                        <th></th>
                        <th>Buchtitel</th>
                        <th>Veröffentlichungsdatum</th>
                        <th>Preis</th>
                        <th>Kaufmenge</th>
                        <th>Betrieb</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(Artikel, Index) in Büchern">
                        <td>{{index+1}}</td>
                        <td>{{Artikelname}}</td>
                        <td>{{Artikel.Datum}}</td>
                        <td>{{item.price | showPrice}}</td>
                        <td>
                            <!--disabled ist wahr, wenn die Schaltfläche deaktiviert ist -->
                            <button @click="reduzieren(index)" v-bind:disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click="erhöhen(index)">+</button>
                        </td>
                        <td><button @click="remove(index)">Entfernen</button></td>
                    </tr>
                </tbody>
            </Tabelle>
            <h2>Gesamtpreis: {{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>Der Einkaufswagen ist leer</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <Skript>
        const app = new Vue({
            el: "#app",
            Daten:{
                Bücher:
                    {
                        Name: 'Einführung in Algorithmen',
                        Datum: '2021-8-1',
                        Preis: 85,00,
                        Anzahl: 1
                    },
                    {
                        Name: 'Die Kunst der UNIX-Programmierung',
                        Datum: '2021-8-2',
                        Preis: 69,00,
                        Anzahl: 1
                    },
                    {
                        Name: 'Programmierperlen',
                        Datum: '2021-8-3',
                        Preis: 35,00,
                        Anzahl: 1
                    },
                    {
                        Name: 'Die Kunst der DOM-Programmierung',
                        Datum: '2021-8-4',
                        Preis: 75,00,
                        Anzahl: 1
                    },
                    {
                        Name: 'Nodejs in einfachen Worten',
                        Datum: '2021-8-5',
                        Preis: 105,00,
                        Anzahl: 1
                    },
                ],
                
            },
            Methoden:{
                reduzieren(index){
                    diese.Bücher[index].Anzahl--;
                },
                erhöhen(Index){
                    diese.Bücher[index].Anzahl++;
                },
                entfernen(index){
                    dies.books.splice(index,1);

                },
            },
            berechnet:{
                // Die im berechneten Attribut geschriebene Methode kann direkt als Attribut totalPrice(){ verwendet werden
     //lass totalPrice = 0;

                    // 1. Gewöhnliche for-Schleife // for (let i = 0; i < this.books.length; i++) {
                    // Gesamtpreis += this.books[i].Anzahl * this.books[i].Preis;
                    // }

                    // 2. Gewöhnliche for-Schleife mit einfacheren Schritten // for (let i in this.books) {
                    // Gesamtpreis += this.books[i].Anzahl * this.books[i].Preis;
                    // }

                    // 3. für (let Element von this.books)
                    //für(let item von this.books){
                        //Gesamtpreis += Artikelanzahl * Artikelpreis;
                    //}
                    //Gesamtpreis zurückgeben;

     // 4. Schreiben von höherwertigen Funktionen reduzieren
     //Gib das Ergebnis direkt zurück, ohne Variablen zu definieren oder zu durchlaufen return this.books.reduce(function(pre, book){
                        returniere vor + Buchpreis * Buchanzahl;
                    },0);
            },
            // Filter:{
                zeigePreis(Preis){
                    return "￥" + 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 Erläuterung zur Verwendung von Vue, um den parabolischen Ballanimationseffekt im Einkaufswagen zu erzielen
So implementieren Sie eine Warenkorbdetailseite in Vue

<<: Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design

>>: GET POST Unterschiede