Dieser Artikel teilt den VueJS -Implementierungscode für Einkaufswagen als Referenz. Der spezifische Inhalt ist wie folgt
HTML:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Mein Vue-Einkaufswagen </title> <link rel = "stylesheet" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href src="js/vue.js"></script> <script src="js/data.js"></script><body> <div> <template v-if="data.length"> <h3>My shopping cart:</h3> <div> <div> <span>Product name</span> <span>Unit price of goods</span> <span>Quantity of goods</span> <span>Operation</span> </div> <div style = "padding: 5%; border: 1px solid schwarz" v-für = "item in data"> <span> {{{item.name}} </span> <span style = "margin-links: 18%"> {{{item.price}} </> <em> <em <em <em <em <em <em <em <em <em <em <em <em <em <em <em <em <em. : class = "{off: item.count == 11}">+</em> {{item.count}} <em v-on: click = "record ($ index)": class = "{off: item.count == 1}">-</em> </span> </div-on: klick: klick: klick (item) " <span> Gesamtpreis des Artikels: {{{Preis | Währung '$' 2}} </span> </template> <template v-ELSE> <div> <h1> Ihr Wagen ist leer </h1> <p> Ob Sie </p> <p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </plan> </divloct> </divloct> </div> </divloct> </divloct> </div> </divloct> -Selektion verwenden. </div> </body> <script> neuer VUE ({el: '. Container', Daten: {Daten: Daten}, berechnet: {price: function () {var price = 0; für (var i = 0; i <this.data.Length; i ++) {var self = that that.data [I]; ($ index) {var self = this.data [$ index]; if (self.count <= 1) {return asten} self.count--;CSS:
H3 {text-align: center;}. Padding: 3%;}. Hinzufügen {Margin-Links: 15%;}. Aus {Hintergrundfarbe: hellgrey; Grenze: 1px feste hellgrey;}JS:
/*** Erstellt vom Administrator am 2016/7/29. */var data = [{Name: 'iPhone 6', Preis: 5466, ID: 1, Graf: 1}, {Name: 'iMac', Preis: 7466, ID: 2, Graf: 1}, {Name: 'iPad', Preis: 5400, ID: 3, Graf: 1}]Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Weitere Vue Learning -Tutorials finden Sie im speziellen Thema "Vue Practical Tutorial".
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.