Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikel wird der spezifische Code von Vue zur Implementierung eines einfachen Einkaufswagens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Schauen wir uns zunächst den fertigen Effekt an.

CSS-Teil

Hier gibt es nicht viel zu sagen, nur den Wissenspunkt zu V-Cloak

Tisch{
  Rand: 1px durchgezogen #e9e9e9;
  Rahmen-Zusammenbruch: Zusammenbruch;
  Rahmenabstand: 0;
}
th,td{
  Polsterung: 8px 16px;
  Rand: 1px durchgezogen #e9e9e9;
  Textausrichtung: zentriert;
}
das {
  Hintergrundfarbe: #f7f7f7;
  Farbe: #5c6b77;
  Schriftstärke: 600;
}
[v-Umhang]{
  Anzeige: keine;
}

HTML-Teil

Hier sind einige verwendete Vue-Wissenspunkte:

v-wenn
v-für
V-Umhang
v-auf > @
v-binden > :
Methoden
berechnet
Filter

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Warenkorb</title>
  <link rel="stylesheet" href="style.css" >
</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>Löschen</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in Büchern">
            <th>{{item.id}}</th>
            <th>{{item.name}}</th>
            <th>{{item.date}}</th>
            <!--Lösung 1 behält Dezimalpunkte und Währungssymbole bei-->
            <!-- <th>{{"￥"+item.price.toFixed(2)}}</th> -->
            <!--Lösung 2-->
            <!-- <th>{{getFinalPrice(item.price)}}</th> -->
            <!--Schema 3-->
            <th>{{item.price | showPrice}}</th>
            <th>
              <button @click="decrement(index)" :disabled="item.count<=0">-</button>
              {{item.count}}
              <button @click="Erhöhen(index)">+</button>
            </th>
            <th><button @click="removeHandle(index)">Entfernen</button></th>
          </tr>
        </tbody>
      </Tabelle>
      <h2>Gesamtpreis:{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-sonst>
      Der Warenkorb ist leer</h2>
  </div>

</body>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</html>

JS-Teil

const app = new Vue({
  el:"#app",
  Daten:{
    Bücher:
      {
        Ich würde: 1,
        Name:"Einführung in Algorithmen",
        Datum:'2006-9',
        Preis: 85,00,
        Anzahl: 1
      },
      {
        Ich würde: 2,
        Name:"Die Kunst der UNIX-Programmierung",
        Datum:'2006-2',
        Preis: 50,00,
        Anzahl: 1
      },
      {
        Ich würde: 3,
        Name:"Die Kunst des Programmierens",
        Datum:'2008-10',
        Preis: 39,00,
        Anzahl: 1
      },
      {
        Ich würde: 4,
        Name: „《Code-Enzyklopädie》“,
        Datum:'2006-3',
        Preis: 128,00,
        Anzahl: 1
      },
      
    ]
  },
  Methoden: {
   //Hier verzichten wir auf die Verwendung der Methode „form“ zur Berechnung des Gesamtpreises und verwenden stattdessen die berechnete Eigenschaft, da dies effizienter ist.
    // getEndpreis(Preis){
    // gebe "￥"+price.toFixed(2) zurück
    // },
    Inkrement(Index){
      diese.Bücher[index].Anzahl++
    },
    dekrementieren(Index){
      diese.Bücher[index].Anzahl--
    },
    entferneHandle(index){
      dies.books.splice(index,1);
    }

  },
  berechnet: {
    Gesamtpreis(){
      // Option 1: Gewöhnliche for-Schleife // let totalPrice = 0;
      // für (lass i = 0; i < this.books.length; i++) {
      // Gesamtpreis += this.books[i].price * this.books[i].count
      // }
      // Gesamtpreis zurückgeben

      // Lösung 2: für in
      // lass totalPrice = 0;
      // für (lass i in diesem.Buch) {
      // // console.log(i);//1 2 3 4
      // Gesamtpreis += this.books[i].price * this.books[i].count
      // }
      // Gesamtpreis zurückgeben

      // Option 3: für von
      // lass totalPrice = 0;
      // für (let item von this.books) {
      // // console.log(item);//Was wir hier erhalten, ist jedes Objekt im Array// totalPrice += item.price * item.count
      // }
      // Gesamtpreis zurückgeben

      // Lösung 4: Reduzieren
      returniere this.books.reduce(function (preValue, book) {
        // console.log(book); // Gib jeweils vier Objekte aus return preValue + book.price * book.count
      }, 0)
    }
  },
  // Filter:{
    zeigePreis(Preis){
      returniere "￥"+Preis.toFixed(2)
    }
  }
})

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
Einfaches Beispiel einer Warenkorbfunktion, implementiert von vuex
Vue realisiert die Berechnung des Gesamtpreises des Einkaufswagens
Das vue+vant-UI-Framework realisiert die Kontrollkästchenauswahl- und -abwahlfunktion des Einkaufswagens
Vuejs implementiert Warenkorbfunktion
Detaillierte Erklärung der von Vue.js implementierten Warenkorbfunktion

<<: Grafisches Tutorial zur Installation von MySQL 8.0.12

>>: So entfernen Sie Wagenrücklaufzeichen aus Text in Linux