Vue simuliert die Warenkorb-Abrechnungsfunktion

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

<!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>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/jquery-3.6.0.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            Polsterung: 0;
            Marge: 0
        }
        
        A {
            Textdekoration: keine;
        }
        .container {
            Breite: 500px;
            Rand: 10px automatisch;
        }
        
        .Titel {
            Breite: 500px;
            Höhe: 50px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
            Schriftgröße: 20px;
            Hintergrundfarbe: blasses Türkis;
        }
        
        .Artikel {
            Position: relativ;
            Höhe: 50px;
            Rahmen unten: 1px durchgehend blasses Türkis;
        }
        
        .item img {
            schweben: links;
            Breite: 100px;
            Höhe: 50px;
        }
        
        .Artikel .Preis {
            Position: absolut;
            schweben: links;
            Breite: 120px;
            Rand links: 10px;
            oben: 15px;
            links: 100px;
        }
        
        .Artikel .Ändern {
            Position: absolut;
            links: 220px;
            oben: 15px;
            schweben: links;
            Breite: 200px;
        }
        
        .ändere ein {
            schweben: links;
            Anzeige: Block;
            Breite: 20px;
            Höhe: 20px;
            Schriftgröße: 18px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 20px;
            Hintergrundfarbe: #ccc;
        }
        
        .Eingabe ändern {
            schweben: links;
            Breite: 50px;
            Rand: 0,5px;
        }
        
        .item .del {
            Position: absolut;
            oben: 8px;
            links: 420px;
            Farbe: rot;
            Schriftgröße: 24px;
        }
        
        .item .del:hover {
            oben: 0;
            Höhe: 50px;
            Hintergrundfarbe: blau;
        }
        
        .gesamt {
            Position: relativ;
            Breite: 500px;
            Höhe: 50px;
            Hintergrundfarbe: Kornblumenblau;
        }
        
        .total span {
            Position: absolut;
            oben: 14px;
            links: 250px;
        }
        
        .total span em {
            Farbe: rot;
            Schriftstil: normal;
            Schriftgröße: 20px;
        }
        
        .total-Schaltfläche {
            Position: absolut;
            oben: 8px;
            links: 400px;
            Breite: 50px;
            Höhe: 35px;
            Randradius: 25 %;
            Rand: keiner;
            Gliederung: keine;
            Hintergrundfarbe: Tomate;
        }
    </Stil>
 
</Kopf>
<Text>
    <div id="app">
 
  <div>
    <div Klasse="Container">
        <mein-Warenkorb></mein-Warenkorb>
    </div>
  </div>
  
    </div>
    <Skripttyp="text/javascript">
   // Drei Unterkomponenten var CartTitle = {
            Requisiten: ['uname'],
            Vorlage: `<div class="title">{{uname}}'s Produkte</div>`
        }
        var Warenkorbliste = {
            Requisiten: ['Liste'],
            Vorlage: ` <div Klasse="Liste">
                    <div class="item" :key="item.id" v-for="Artikel in Liste">
                        <img :src="item.img" alt="">
                        <div class="Preis">{{item.price}}￥/Stück</div>
                        <div Klasse="ändern">
                            <a href="" @click.prevent=" sub(item.id)">-</a>
                            <Eingabetyp="Text" Klasse="Nummer" :Wert="Artikel.Nummer" @blur="Änderungsnummer(Artikel.ID,$Event)">
                            <a href="" @click.prevent=" hinzufügen(item.id)">+</a>
                        </div>
                        <div class="del" @click="del(item.id)">×</div>
                    </div>
                </div>
                    `,
            Methoden: {
                // Übergebe die zu löschende ID an die übergeordnete Komponente
                del: Funktion(id) {
                    // konsole.log(id);
                    dies.$emit("del-cart", id);
                },
                // Anzahl der Formulareingaben ändern changenum: function(id, event) {
                    //Konsole.log(ID, Ereignis.Ziel.Wert);
                    // An die übergeordnete Komponente übergeben und dann die Menge ändern this.$emit('change-num', {
                        Ich würde: Ich würde,
                        Num: Ereignis.Ziel.Wert
                    })
                },
                // Klicken Sie auf die Minus-Schaltfläche sub: function(id) {
                    dies.$emit('Unternummer', ID);
                },
                //Klicken Sie auf die Plus-Schaltfläche. add: function(id) {
                    dies.$emit('add-num', id);
                }
            }
        }
        var Warenkorbgesamt = {
                Requisiten: ['Liste'],
                Vorlage: `<div class="total">
                    <span>Gesamtpreis: <em>{{total}}</em>￥</span>
                    <button>Zur Kasse</button>
                </div>`,
                berechnet: {
                    insgesamt: Funktion() {
                        var Summe = 0;
                        diese.Liste.fürJeden(Element => {
                            Summe += Artikelpreis * Artikelnummer;
                        });
                        Rücklaufsumme;
                    }
                }
            }
            // Definieren Sie die übergeordnete Komponente Vue.component('my-cart', {
            Daten: Funktion() {
                zurückkehren {
                    uname: 'Ich',
                    Liste: [{
                        ID: 1,
                        Name: 'Anta Schuhe',
                        Preis: 260,
                        Zahl: 1,
                        img: 'img/a.jpg'
                    }, {
                        ID: 2,
                        Name: 'Haier Warmwasserbereiter',
                        Preis: 2000,
                        Zahl: 1,
                        img: 'img/hai.jpg'
                    }, {
                        ID: 3,
                        Name: "iPhone",
                        Preis: 7000,
                        Zahl: 1,
                        img: 'img/iphone.jpg'
                    }, {
                        ID: 4,
                        Name: „Huawei-Handy“,
                        Preis: 4500,
                        Zahl: 1,
                        img: 'img/h.jpg'
                    }]
                }
            },
            Vorlage: `<div class="mycart">
                <cart-title :uname="uname"></cart-title>
                <cart-list :list="Liste" @del-cart="delcart($event)" @change-num="changeNum($event)" @sub-num="subnum($event)" @add-num="addnum($event)"></cart-list>
                <cart-total :list="Liste"></cart-total>
                </div>`,
            Komponenten:
                'Warenkorb-Titel': Warenkorbtitel,
                'Warenkorbliste': Warenkorbliste,
                'Warenkorb-Gesamt': WarenkorbGesamt,
            },
            Methoden: {
                delcart: Funktion(ID) {
                    // Lösche die entsprechenden Daten in der Liste entsprechend der ID // 1. Finde den Index der Daten, die der ID entsprechen var index = this.list.findIndex(item => {
                        gibt item.id == id zurück;
                    });
                    // 2. Löschen Sie die entsprechenden Daten entsprechend dem Index this.list.splice(index, 1);
                },
                //Ändere die Nummer num in der Liste entsprechend der ID
                Änderungsnummer: Funktion(Wert) {
                    //Konsole.log(Wert);
                    diese.Liste.einige(Element => {
                        wenn (item.id == val.id) {
                            Artikelnummer = Wertnummer;
                        }
                    })
                },
                //Minuszeichen zur Reduzierung der Zahl
                Unternummer: Funktion (Ereignis) {
                    // console.log(event); event ist die angeklickte ID-Nummer this.list.some(item => {
                        wenn (item.id == event && item.num > 0) {
                            Artikelnummer--;
                        }
                    })
                },
                // Pluszeichen erhöht die Zahl
                Zusatznummer: Funktion(Ereignis) {
                    diese.Liste.einige(Element => {
                        wenn (item.id == event) {
                            Artikel.num++;
                        }
                    })
                }
            }
        });
        var vm = neuer Vue({
            el: "#app",
            Daten: {
 
            }
        });
 
    
    </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: