If vue implements the function of shopping cart
In this article, the editor introduces in detail "vue if shopping cart function", the content is detailed, the steps are clear, and the details are handled properly. I hope this "vue if shopping cart function" article can help you solve your doubts.
Principle analysis and implementation
Note that in order to achieve this function, you need to learn: Vue learning path (basic article), in-depth understanding of the use of each instruction
First of all, let's first write the layout, and introduce vue to prepare the vue instance, not to mention this, the code is as follows
Vue implements Shopping cart
Shopping Cart
Name:
Unit price:
Quantity:
Add shopping cart
Name
Unit price
Quantity
Subtotal
{{product.name}}
{{product.price}}
-
{{product.count}}
+
{{product.price*product.count}}
Total price: {{total ()}} yuan
New Vue ({
El: "# app"
Data: {
Products: [
{name: "long johns", price: "81", count: 2}
{name: "Huawei", price: "5810", count: 1}
]
NameValue: ""
PriceValue: ""
CountValue: 0
TotalPrice:0
}
Methods: {
Incr (index) {
This.products [index] .count + +
}
Desc (index) {
This.products [index] .count--
}
Add () {
This.products.push ({name: this.nameValue, price: this.priceValue, count: this.countValue})
This.nameValue = ""
This.priceValue = ""
This.countValue = 0
}
Total () {
Var price=0
For (var I = 0; I
