Vue实现购物车实例代码两则

const app = new Vue({
 el:"#app",
 data: {
 books: [
 {
 id: 1,
 name: '算法导论',
 date: '2019-01-10',
 price: 85.00,
 count: 1
 },
 {
 id: 2,
 name: '计算机导论',
 date: '2019-02-14',
 price: 90.00,
 count: 2
 },
 {
 id: 3,
 name: '科学导论',
 date: '2019-09-10',
 price: 85.21,
 count: 1
 },
 {
 id: 4,
 name: '网络导论',
 date: '2019-08-21',
 price: 19.02,
 count: 1
 },
 ]
 },
 methods:{
 getFinalPrice(price) {
 return '$' + price.toFixed(2)
 },
 increment(index){
 /*if(this.books[index].count <= 1) return*/
 this.books[index].count--
 },
 decrement(index){
 this.books[index].count++
 },
 removeHandler(index){
 this.books.splice(index,1)
 }
 },
 filters:{
 showPrice(price){
 return '$' + price.toFixed(2)
 }
 },
 computed:{
 totalprice(){
 let tprice = 0
 for(let i = 0; i

table{
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 bordre-spacing: 0;
}

th, td {
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}

th{
 backgroud-color: #f7f7f7;
 color: #5c6b77;
 font-weight: 600;
}