The order interface

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="cs.css"> < / head > < body > < div id = "app" > < div v - if = "books. Length > < table > < thead > < tr > < th > books name < / th > < th > publication date < / th > < th > < / th > purchase quantity Price < th > < / th > < / tr > < thead > < tbody > < tr v - for = "(item, index) in books" > < td > {{item. Id}} < / td > < td > {{item. The name}} < / td > <td>{{item.data}}</td> <td>{{item.price | finalprice}}</td><! - the use of filter < td > {{item. The price | finalprice}} < / td > the use of filter -- -- > > < td > < button @ click = "decrese (index)" > - < / button > {{item. Count}} < button @ click = "increse (index)" > + < / button > < / td > < td > < button @ click = "increse2 (index)" > remove < / button > < / td > < / tr > < / tbody > < / table > < h2 > {{totalPrice | finalprice}} < / h2 > < / div > < h2 v - else > shopping cart is empty < / h2 > < / div > < script SRC = ".. /sjms/hellojs/js/vue.js"></script> <script src="jjs.js"></script> </body> </html>Copy the code
const app =new Vue({ el:'#app', data:{ books:[ { id:1, name:'aa', data:'2020-6', price:30, count:1 }, { id:2, name:'bb', data:'2020-6', price:90, count:1 } ] }, computed:{ totalPrice(){ let totalPrice = 0; debugger for(let i =0 ; i<this.books.length; i++){ totalPrice += this.books[i].price * this.books[i].count } return totalPrice; } }, filters:{ finalprice(price){ return '$'+ price.toFixed(2); } }, methods:{ decrese(index){ this.books[index].count--; }, increse(index){ this.books[index].count++; }, increse2(index){ this.books.splice(index,1); }}})Copy the code