This article shares the Vuejs shopping cart implementation code for your reference. The specific content is as follows
html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>My vue shopping cart</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script 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 black" v-for="item in data"> <span>{{item.name}}</span> <span style="margin-left: 18%">{{item.price}}</span> <span> <em v-on:click="add($index)" :class="{off:item.count==11}">+</em> {{item.count}} <em v-on:click="reduce($index)" :class="{off:item.count==1}">-</em> </span> <span v-on:click="remove(item)">Remove</span> </div> </div> <h2>List: </h2> <span>Total price of the item: {{price |currency '$' 2}}</span> </template> <template v-else> <div> <h1>Your cart is empty</h1> <p>Whether to re-select</p> <p><a href="#" role="button">Re-select</a></p> </div> </template> </div></body><script> new Vue({ el:'.container', data:{ data:data }, calculated:{ price:function () { var price = 0; for(var i=0;i<this.data.length;i++){ var self = this.data[i]; price += self.count * self.price; } return price; } }, methods:{ add:function ($index) { var self = this.data[$index]; if(self.count >10){ return false; } self.count++; }, reduce:function($index){ var self = this.data[$index]; if(self.count <= 1){ return false } self.count--; }, reduce:function($index){ var self = this.data[$index]; if(self.count <= 1){ return false } self.count--; }, remove:function(item){ this.data.$remove(item); } } })</script></html>css:
h3{ text-align: center;}.left{ margin-left: 14%;}.item{ text-align: center; padding: 3%;}.add{ margin-left: 15%;}.off{ background-color: lightgrey; border: 1px solid lightgrey;}js:
/** * Created by Administrator on 2016/7/29. */var data = [ { name:'IPhone 6', price:5466, id:1, count:1 }, { name:'IMac', price:7466, id:2, count:1 }, { name:'iPad', price:5400, id:3, count:1 }]This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
For more vue learning tutorials, please read the special topic "vue practical tutorial"
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.