Este artículo comparte el código de implementación del carrito de compras VueJS para su referencia. El contenido específico es el siguiente
HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> mi carrito de compras vue </title> <link rel = "stylesheet" href = "css/bootstrap.min.css"> <link rel = "styleshe" href = "css/style/style.csss". src = "js/vue.js"> </script> <script src = "js/data.js"> </script> <body> <div> <plantplate v-if = "data.length"> <h3> mi carro de compras: </h3> <div> <div> <pan> name de producto </span> <pan> un unidades unitar </div> <div style = "Padding: 5%; Border: 1px Solid Black" v-For = "item in Data"> <span> {{item.name}} </span> <span style = "margin-left: 18%"> {{item.price}}} </span> <em v-on: click = "add ($ index)" " : class = "{{Off: item.count == 11}">+</em> {{item.Count}} <em v-on: click = "redir <span> Precio total del artículo: {{precio | moneda '$' 2}} </span> </template> <Template v-else> <div> <h1> su carrito está vacío </h1> <p> si a reeleccionar </p> <p> <a href = "#" rol = "bull bull"> volver </div> </body> <script> new Vue ({el: '. Container', Data: {data: data}, calculado: {precio: function () {var precio = 0; for (var i = 0; i <this.data.length; i ++) {var = this.data [i]; precio+= self.count. * self.price;} RETURT Price;},},}: {Añad: {Añad: {Añad: ($ índice) {var self = this.data [$ index]; <= 1) {return false} self.count--;CSS:
H3 {text-align: center;}. izquierda {margen-izquierda: 14%;}. item {text-align: center; relleno: 3%;}. Agregar {margen-izquierda: 15%;}. Off {Background-Color: LightGrey; Border: 1px Solid LightGrey;}JS:
/*** Creado por el administrador el 2016/7/29. */var data = [{nombre: 'iPhone 6', precio: 5466, id: 1, recuento: 1}, {nombre: 'iMac', precio: 7466, id: 2, recuento: 1}, {nombre: 'iPad', precio: 5400, id: 3, conte: 1}]Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Para obtener más tutoriales de aprendizaje Vue, lea el tema especial "Vue Practical Tutorial"
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.