Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung eines einfachen Einkaufswagens als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

HTML-Startseite

<!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>
  <link rel="stylesheet" href="/css/index.css" >
  
</Kopf>
<Text>
  <div id="app">
   <div v-if="Bücher.Länge != 0">
    <Tabelle>
      <Kopf>
        <tr>
          <th></th>
          <th>Buchtitel</th>
          <th>Veröffentlicht wie geplant</th>
          <th>Preis</th>
          <th>Kaufmenge</th>
          <th>Betrieb</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in Büchern">
          <td>{{item.id}}</td>
          <td>{{Artikelname}}</td>
          <td>{{Artikel.Datum}}</td>
          <td>{{item.price | showPrice}}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="Erhöhen(index)">+</button>
          </td>
          <td><button @click="removeHandle(index)">Entfernen</button></td>
        
        </tr>
      </tbody>
    </Tabelle>
    <h2>Der Gesamtpreis beträgt: {{totalPrice | showPrice}}</h2>
   </div>
   <h2 v-else>Der Einkaufswagen ist leer</h2>
  </div>
 
  <script src="/js/vue.js"></script>
  <script src="/js/index.js"></script>
</body>
</html>

CSS Code

* {
  Rand: 0;
  Polsterung: 0;
}
Tisch {
  Rand: 100px 0 0 100px;
  Rand: 1px durchgezogen #e9e9e9;
  Rahmen-Zusammenbruch: Zusammenbruch;
  Rahmenabstand: 0;
}
 
Mai,
td {
  Polsterung: 8px 16px;
  Rand: 1px durchgezogen #e9e9e9;
  Textausrichtung: links;
}
 
das {
  Hintergrundfarbe: #f7f7f7;
  Farbe: Schwarz;
  Schriftstärke: 6000;
}
 
h2 {
  Breite: 500px;
  Rand links: 100px;
}
 
Taste {
  Polsterung: 5px;
}

JS-Code (Vue)

const app = new Vue({
  el:"#app",
  Daten:{
    Bücher:
      {
        Ich würde: 1,
        Name: 'Einführung in Algorithmen',
        Datum:'2019-2',
        Preis: 85,00,
        Anzahl: 1
      },
      {
        Ich würde: 2,
        Name:'Computergrundlagen',
        Datum:'2019-2',
        Preis:95.00,
        Anzahl: 1
      },
      {
        Ich würde: 3,
        Name: „C++ Erweiterte Sprache“,
        Datum:'2019-2',
        Preis:89.00,
        Anzahl: 1
      },
      {
        Ich würde: 4,
        Name: „《Kompilierungsprinzipien》“,
        Datum:'2019-2',
        Preis: 77,00,
        Anzahl: 1
      },
    ]
   
  },
  Methoden:{
    dekrementieren(Index){
      diese.Bücher[index].Anzahl--
    },
    Inkrement(Index){
      diese.Bücher[index].Anzahl++
    },
    entferneHandle(index){
      dies.books.splice(index,1)
    }
  },
 
  berechnet:{
    Gesamtpreis(){
      let finalPrice = 0
      für(lass i = 0; i < this.books.length; i++){
        finalPrice += diese.Bücher[i].Preis * diese.Bücher[i].Anzahl
      }
      Endpreis zurückgeben
    }
  },
 
  Filter:
    zeigePreis(Preis){
      returniere '￥' + Preis.toFixed(2)
    }
  }
})

Ergebnisse der Operation

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
Detaillierte Erläuterung zur Verwendung von Vue, um den parabolischen Ballanimationseffekt im Einkaufswagen zu erzielen
So implementieren Sie eine Warenkorbdetailseite in Vue
Vuejs implementiert Warenkorbfunktion

<<: Einige Fragen zu Hyperlinks

>>: HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN