十二、Vue 实现 购物车demo

1. html代码

  
    
    
    
  
 
  
    

      

        

          

            

              

              
书籍名称
              
出版日期
              
价格
              
购买数量
              
操作
            
          
          

            

              
 {{ item.id }} 
              
 {{ item.name }} 
              
 {{ item.date }} 
              
              
              
 {{ item.price | showPrice }}
              

                +
                {{ item.sumNumber }} 
                -
              
              
 移除 
            
          
        
        
总价格：{{ totalSumPrice | showPrice }}
      
      

        
购物车为空
      
    
    
    
  

2. css代码

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

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

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

3. js代码

const app = new Vue({
  el: "#app",
  data: {
    books: [
      {id: 1, name: "《算法导论》", date: "2006-9", price: 85.00, sumNumber:1},
      {id: 2, name: "《UNIX编程艺术》", date: "2006-2", price: 59.00, sumNumber:1},
      {id: 3, name: "《变成注记》", date: "2008-10", price: 39.00, sumNumber:1},
      {id: 4, name: "《代码大全》", date: "2006-3", price: 128.00, sumNumber:1},
    ],
  },
  methods: {
    // getFinalPrice(price){
    //   return "￥" + price.toFixed(2);
    // },
    increment(index){
      this.books[index].sumNumber++;
    },
    decrement(index){
      this.books[index].sumNumber--;
    },
    removeHandle(index){
      this.books.splice(index,1);
    }
  },
  computed: {
    totalSumPrice(){
      let totalprice = 0;
      // //1. 普通的for循环
      // for(let i=0; i