Fallstudie zum Vue-Einkaufswagen

Fallstudie zum Vue-Einkaufswagen

1. Warenkorb-Beispiel

Nach einer Reihe von Studien üben wir hier einen Einkaufswagenfall.

Voraussetzungen: Verwenden Sie vue , um eine Formularseite mit der Kaufmenge auf der Seite zu schreiben. Klicken Sie auf die Schaltflächen + oder -, um die Anzahl der Einkaufswagen zu erhöhen oder zu verringern. Die Mindestmenge darf nicht unter 0 liegen. Klicken Sie auf die Schaltfläche Entfernen, um das Produkt zu entfernen. Wenn alle Produkte entfernt sind, verschwindet das Formular auf der Seite.

Dann erscheint der Text: Einkaufswagen ist leer. Unter dem Formular steht der Gesamtpreis der Ware, der mit zunehmender Warenanzahl steigt. Der Standardwert ist 0 Yuan.

Der Gesamteffekt ist wie folgt:

2. Code-Implementierung

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <script src="../js/vue.js"></script>
  <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">
  <div v-if="Bücher.Länge">
    <Tabelle>
      <Gewinde>
        <tr>
          <th></th>
          <th>Buchtitel</th>
          <th>Veröffentlichungsdatum</th>
          <th>Preis</th>
          <th>Kaufmenge</th>
          <th>Betrieb</th>
        </tr>
      </Gewinde>
      <tbody>
      <tr v-for="(Buch, Index) in Büchern" :key="Buch">
        <td>{{index+1}}</td>
        <td>{{Buchname}}</td>
        <td>{{Buch.Veröffentlichungsdatum}}</td>
        <td>{{Buchpreis | Preis anzeigen}}</td>
        <td>
          <button @click="verringern(index)" :disabled="buch.anzahl <= 0">-</button>
          {{book.count}}
          <button @click="erhöhen(index)">+</button>
        </td>
        <td>
          <button @click="removeClick(index)">Entfernen</button>
        </td>
      </tr>
      </tbody>
    </Tabelle>
    <p>Gesamtpreis: {{totalPrice | showPrice}}</p>
  </div>
  <h2 v-else>Der Einkaufswagen ist leer</h2>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Bücher:
        {"name":"Einführung in Algorithmen", "publish_date":"2006-9", "price":20.00, "count": 0},
        {"name":"Die Kunst der UNIX-Programmierung", "publish_date":"2006-2", "price":30.00, "count": 0},
        {"Name": "Programmiertechnologie", "Veröffentlichungsdatum": "2008-10", "Preis": 40,00, "Anzahl": 0},
        {"Name": "Codesammlung", "Veröffentlichungsdatum": "2006-3", "Preis": 50,00, "Anzahl": 0},
      ],
    },
    Methoden: {
      // Erhöhen +
      verringern(Index){
        diese.bücher[index].anzahl-=1
      },
      // reduzieren-
      erhöhen(Index){
        diese.bücher[index].anzahl+=1
      },
      //Schaltfläche entfernen removeClick(index){
        dies.books.splice(index, 1)
      }
    },
    berechnet: {
      // Gesamtpreis berechnen totalPrice(){
        sei totalPrice = 0
        für (let item von this.books){
          Gesamtpreis += Artikelpreis * Artikelanzahl
        }
        Gesamtpreis zurückgeben
      }
    },
    // Filter zum Filtern von Preisen auf 2 Dezimalstellen Filter: {
      zeigePreis(Preis){
        returniere '￥' + Preis.toFixed(2)
      }
    }
  })
</Skript>
</body>
</html>

3. Zusammenfassung

v-for: Loop, Loop books
v-on: Ereignisüberwachung, Überwachung von Klickereignissen
disabled: Das Attribut, das angibt, ob die Schaltfläche anklickbar ist. Wenn es True ist, ist sie anklickbar, und wenn es False ist, ist sie nicht anklickbar. Fügen Sie Beurteilungsbedingungen hinzu: disabled="book.count <= 0" Wenn die Anzahl der Einkaufswagen ≤0 , kann sie nicht angeklickt werden
v-if und v-else: Bedingte Beurteilung, Beurteilen Sie die Länge der books . Wenn eine Länge vorhanden ist, zeigen Sie die Liste an. Wenn die Länge 0 ist, zeigen Sie den Text „Einkaufswagen leer“ an.
Filter: Benutzerdefinierter Filter, filtert den Preis, so dass der Preis nach dem Filtern 2 Dezimalstellen hat
berechnet: berechnete Eigenschaft, berechnet den Gesamtpreis des Kaufs

Dies ist das Ende dieses Artikels über die Praxis des Vue-Einkaufswagens. Weitere relevante Inhalte zum Praxis-Vue-Einkaufswagen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Eine kleine Übung zur Implementierung eines Einkaufswagens in Vue

<<:  Details zu verschiedenen Schriftformaten in HTML-Webseiten

>>:  Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)

Artikel empfehlen

JavaScript zur Implementierung eines Sprachwarteschlangensystems

Inhaltsverzeichnis einführen Hauptmerkmale Effekt...

XHTML-Einführungstutorial: Webseitenkopf und DTD

Obwohl Kopf und DTD nicht auf der Seite angezeigt...

Detailliertes Beispiel für die Verwendung einer asynchronen JS-Fetch-Anforderung

Inhaltsverzeichnis Asynchronität verstehen abrufe...

Detailliertes Tutorial zum Anpassen des Installationspfads der MySQL-Version 5.7.18 (Installation von Binärpaketen)

Installationspfad: /application/mysql-5.7.18 1. V...

Implementierungscode der HTML-Floating-Promptbox-Funktion

Allgemeine Formulareingabeaufforderungen belegen ...

Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst

Was ist eine große Sache? Transaktionen, die über...

HTML-Tabellen-Tag-Tutorial (24): horizontales Ausrichtungsattribut der Zeile ALIGN

In horizontaler Richtung können Sie die Zeilenaus...

Aufrufen und Ausführen von Host-Docker-Operationen im Docker-Container

Zunächst einmal ist dieser Beitrag Docker-Neuling...

Eine kurze Diskussion zum Implementierungsprinzip des Vue-Slots

Inhaltsverzeichnis 1. Beispielcode 2. Sehen Sie d...

So deinstallieren Sie MySQL sauber (getestet und effektiv)

Wie deinstalliere ich Mysql vollständig? Befolgen...

Der Unterschied und die Wahl zwischen Datum und Uhrzeit und Zeitstempel in MySQL

Inhaltsverzeichnis 1 Unterschied 1.1 Raumbelegung...

Verwendung des Linux-Watch-Befehls

1. Befehlseinführung Der Befehl „Watch“ führt den...

Erstellen eines Image-Servers mit FastDFS unter Linux

Inhaltsverzeichnis Serverplanung 1. Systemkompone...

So stellen Sie Kafka in Docker bereit

Inhaltsverzeichnis 1. Docker erstellen 2. Betrete...

So installieren und konfigurieren Sie MySQL 5.7.19 unter CentOS 6.5

Die detaillierten Schritte zur Installation von m...