Este artigo compartilha o código de implementação do carrinho de compras Vuejs para sua referência. O conteúdo específico é o seguinte
html:
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <title> meu carrinho de compras Vue </ititle> <link rel = "Stylesheet" href = "css/bootstrap.min.cs"> <link Rel = "Stylesheet" src = "js/vue.js"> </script> <script src = "js/data.js"> </script> <body> <div> <modelo v-if = "data.lengthing"> <h3> meu carrinho de compras: </h3> <div> <div> <pan> </span> <sput> unidade de carrinho: <pan> Operação </span> </div> <div style = "preenchimento: 5%; borda: 1px preto sólido" v-for = "item em dados"> <pan> {{item.name}} </span> <span style = "margin-left: 18%"> {) : class = "{off: item.count == 11}">+</em> {{item.count}} <em v-on: click = "Reduce ($ index)": class = "{OFF: Item.count == 1}">-</em> </</span V-on: clique = "Remover (Remover)"> "> <pan> Preço total do item: {{Price | moeda '$' 2}} </span> </modemplate> <template v-else> <div> <h1> Seu carrinho está vazio </h1> <p> se re-selecion </p> <p> <p> <a href = "#" role = ">"> re-seleção </ </div> </body> <cript> new vue ({el: '. contêiner', dados: {dados: dados}, calculado: {price: function () {var price = 0; para (var i = 0; i <this.data.length; i ++) {var self = this.data [i]; preso; preso; Adicionar: Função ($ index) {var self = this.data [$ index]; if (self.count <= 1) {return false} self.count--;CSS:
h3 {text-align: Center;}. esquerda {margem-left: 14%;}. Item {text-align: Center; preenchimento: 3%;}. Adicione {margem-esquerda: 15%;}. Border: 1px Solid Lightgrey;}JS:
/*** Criado pelo Administrador em 2016/7/29. */var dados = [{nome: 'iPhone 6', preço: 5466, id: 1, contagem: 1}, {nome: 'iMac', preço: 7466, id: 2, contagem: 1}, {nome: 'iPad', preço: 5400, id: 3, contagem: 1}]Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
Para mais tutoriais de aprendizado de Vue, leia o tópico especial "Vue Practical Tutorial"
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.