How does vue realize a shopping cart that can change the amount of shopping?
This article focuses on "how to achieve a shopping cart that can change the number of shopping by vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve a shopping cart that can change the amount of shopping by vue".
Effect picture:
Knowledge points:
1.computed calculation Properties
2.filters filter
Implementation code: Document table {border-collapse: collapse; border-spacing: 0; border: 1px solid # ccc;} td, th {padding: 8px 16px; border: 1px solid # ccc; text-align: left;} th {background-color: # f7f7; color: # 5c6b77 } Book title publication date price purchase quantity fuck Make {{item.id}} {{item.name}} {{item.date}} {{item.price | toprice}} -{{item.aunt}} + remove Total price: {{getallprice | toprice}} you have no shopping information const vm = new Vue ({el: "# box" Data: {books: [{id: 1, name: "vue.js actual combat", date: "2010.2.4", price: 82.00, aunt: 1} {id: 2, name: "javascript actual combat", date: "2010.2.4", price: 108.00, aunt: 1}, {id: 3 Name: "html+css actual combat", date: "2010.2.4", price: 42.50, aunt: 1}, {id: 4, name: "axios actual combat" Date: "2010.2.4", price: 82.00, aunt: 1}, {id: 5, name: "jquery actual combat", date: "2010.2.4" Price: 65.20, aunt: 1},]}, methods: {add (index) {this.books [index] .aunt + + }, down (index) {this.books [index] .aunt- }, remove (index) {this.books.splice (index, 1)},}, computed: {getallprice () {let all = 0; for (let I = 0; I < this.books.length) Filters +) {all + = this.books[ I] .price * this.books.aunt} return all}, filters: {toprice (price) {return "¥" + price.toFixed (2)} }}) so far I believe you have a better understanding of "how vue can achieve a shopping cart that can change the number of shopping". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
