Shulou(Shulou.com)06/01 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.