Fallstudie zum Vue-Einkaufswagen

Inhaltsverzeichnis

1. Warenkorb-Beispiel
2. Code-Implementierung
3. Zusammenfassung

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)

Der Unterschied zwischen dem Namen und der ID des Ziels eines Tags, das auf das Iframe verweist

IE6-Schriftart kann nicht definiert werden: Die Größe von 13 Pixeln ist ungültig. IE6 zeigt automatisch eine größere Schriftartlösung an.

Als ich vor einigen Tagen ein Modul einer Webseite...

Fallstudie zum Vue-Einkaufswagen

Inhaltsverzeichnis

1. Warenkorb-Beispiel

2. Code-Implementierung

3. Zusammenfassung

Der Unterschied zwischen dem Namen und der ID des Ziels eines Tags, das auf das Iframe verweist

Ein Vergleich zwischen dem href-Attribut und dem onclick-Ereignis des a-Tags

Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird

CentOS7.5-Installationstutorial für MySQL

CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial

Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu

Detaillierte Erklärung der scp- und sftp-Befehle unter Linux

Prinzipien und Beispiele für Lambda-Ausdrücke

Artikel empfehlen

Verwendung und Demonstration von ref in Vue

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Probleme bei der Installation von MySQL und mysql.sock unter Linux

Detaillierte Erklärung des Pufferpools in MySQL

So migrieren Sie das Datenverzeichnis in mysql8.0.20

Detaillierte Erläuterung von Beispielen für JS-Closure- und Garbage-Collection-Mechanismen

MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest

Implementierung der kontinuierlichen Integration von Jenkins+Docker

Analyse und Lösung des beim Start von MySQL gemeldeten Fehlers „ERROR:2002“

Analyse der Informationsarchitektur von Facebook

IE6-Schriftart kann nicht definiert werden: Die Größe von 13 Pixeln ist ungültig. IE6 zeigt automatisch eine größere Schriftartlösung an.

Zabbix-Konfiguration DingTalk-Alarmfunktions-Implementierungscode

Detaillierte Erklärung des Prinzips und der Funktion des JavaScript-Closures

Detaillierte Erklärung der grundlegenden Verwendung des VUE Watch Listener

Implementierung der Docker-Bereitstellung von Webprojekten