Vue实现简单购物车小案例 Vue实现简单购物车小案例

【Vue实现简单购物车小案例】本文实例为大家分享了Vue实现简单购物车的具体代码，供大家参考，具体内容如下
HTML首页

Document - 锐客网
书籍名称出版如期价格购买数量操作
{{item.id}} {{item.name}} {{item.date}} {{item.price | showPrice}} {{item.count}}
总价格为：{{totalPrice | showPrice}}购物车为空

	书籍名称	出版如期	价格	购买数量	操作
{{item.id}}	{{item.name}}	{{item.date}}	{{item.price \| showPrice}}	{{item.count}}

css代码

* {margin: 0; padding: 0; }table {margin: 100px 0 0 100px; border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td {padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th {background-color: #f7f7f7; color: black; font-weight: 6000 ; } h2 {width: 500px; margin-left: 100px; } button {padding: 5px; }

js代码（Vue）

const app = new Vue({el:"#app",data:{books:[{id:1,name:'《算法导论》',date:'2019-2',price:85.00,count:1},{id:2,name:'《计算机基础》',date:'2019-2',price:95.00,count:1},{id:3,name:'《c++高级语言》',date:'2019-2',price:89.00,count:1},{id:4,name:'《编译原理》',date:'2019-2',price:77.00,count:1},]},methods:{decrement(index){this.books[index].count--},increment(index){this.books[index].count++},removeHandle(index){this.books.splice(index,1)}}, computed:{totalPrice(){let finalPrice = 0for(let i = 0; i < this.books.length; i++){finalPrice +=this.books[i].price * this.books[i].count}return finalPrice}}, filters:{showPrice(price){return '￥' + price.toFixed(2)}}})

运行结果