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

Detaillierte Erläuterung des MySQL-Redo-Logs (Redo-Log) und des Rollback-Logs (Undo-Log)

Vorwort: Im vorherigen Artikel wurden mehrere all...

Beispiel zum Ändern der inländischen Quelle in Ubuntu 18.04

Die eigene Quelle von Ubuntu stammt aus China, da...

So sortieren Sie eine Zeile oder Spalte in MySQL

Verfahren: Nach Beschreibung: Beides kann nicht e...

Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)

Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...

JavaScript implementiert die asynchrone Übermittlung von Formulardaten

In diesem Artikelbeispiel wird der spezifische Ja...

So verwenden Sie mysqldump zum Sichern von MySQL-Daten

1. Einführung in mysqldump mysqldump ist ein logi...

Einführung in die Cloud-native-Technologie Kubernetes (K8S)

Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...

CSS-Pickup-Pfeile, Kataloge, Icons Implementierungscode

1. Verschiedene CSS-Symbole Es gibt drei Möglichk...

Eine einfache und eingehende Studie zu Async und Await in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Detaillierte ...

Spezifische Verwendung von Linux which Befehl

Oft möchten wir in Linux eine Datei finden, wisse...

So lösen Sie das Problem ERROR 2003 (HY000) beim Starten von MySQL

1. Problembeschreibung Beim Starten von MySQL tri...

Linux-Befehl „cut“ erklärt

Der Cut-Befehl in Linux und Unix dient dazu, aus ...

Die HTML-Eingabedateisteuerung begrenzt den Typ der hochgeladenen Dateien

Fügen Sie der Webseite ein HTML-Steuerelement für...

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

Inhaltsverzeichnis 1 Unterschied 1.1 Raumbelegung...

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Szenario Das Unternehmensprojekt wird in Docker b...