Cet article partage le code d'implémentation du panier VUEJS pour votre référence. Le contenu spécifique est le suivant
HTML:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> mon cadro vue </ title> <lien rel = "stylesheet" href = "css / bootstrap.min.css"> <link rel = "stylesheet" href = "css / style.csSS"> <script = script "href =" css / style.csSSS "> <Script = Script" href = "css / style.csSS"> <Script = Script "Href =" CSS / style.CSS " src = "js / vue.js"> </ script> <script src = "js / data.js"> </ script> <body> <div> <template v-if = "data.length"> <h3> mon panier: </h3> <div> <v> <pan> nom de produit </span> <pander> Prix d'unité </panne> <panneuse> Quantité de biens de biens </panne> Spank <pander> Spanche <pander> Spany <pander> Spany <pander> Spany <pander> Spany <pander> </div> <div style = "padding: 5%; border: 1px solide noir" v-for = "item in data"> <span> {{item.name}} </span> <span style = "margin-left: 18%"> {{item.price}} </pan> <pan> <em V-on: click = "add ($ index)" : class = "{off: item.count == 11}"> + </em> {{item.count}} <em v-on: click = "réduction ($ index)": class = "{off: item.count == 1}"> - </em> </ span> <span V-on: click = "retire (item)"> supprimer </pan> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> <span> Prix total de l'article: {{Price | devise '$' 2}} </span> </ template> <template v-else> <div> <h1> Votre panier est vide </h1> <p> que ce soit pour resélectionner </p> <p> <a href = "#" role = "Button"> resélection </a> </p> </p> </v Div> </div> </body> <script> new Vue ({el: '. Container', data: {data: data}, calculé: {prix: function () {var prix = 0; pour (var i = 0; i <this.data.length; i ++) {var self = this.data [i]; Price + = SELL.Count * self.Price;} ($ index) {var self = this.data [$ index]; if (self.Count <= 1) {return false} self.Count--;CSS:
H3 {Text-Align: Center;}. Left {margin-left: 14%;}. item {text-align: Center; rembourrage: 3%;}. Add {margin-left: 15%;}. off {background-Color: Lightgrey; Border: 1Px Solid Lightgrey;}JS:
/ ** * Créé par l'administrateur sur 2016/7/29. * / var data = [{name: 'iPhone 6', prix: 5466, id: 1, comte: 1}, {name: 'iMac', prix: 7466, id: 2, count: 1}, {name: 'iPad', prix: 5400, id: 3, count: 1}]Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Pour plus de tutoriels d'apprentissage Vue, veuillez lire le sujet spécial "Vue Practical Tutorial"
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.