本文共 3299 字，大约阅读时间需要 10 分钟。

代码如下：

index.html

//index.html    
       
           
       
   
        
    
            
     
                      
                           
                                
                                
书籍名称
                                
出版日期
                                
价格
                                
购买数量
                                
操作
                           
                      
                      
                           
                                                                
{ { each.id}}
                                
{ { each.name}}
                                
{ { each.date}}
                                                                                                                                
{ { each.price | showPrice}}
                                
 - { { each.count}} + 
                                
移除
                           
                      
                 
            
     
总价格：{   {   totalPrice}}
        
    
        
    
购物车为空！
    
   
        

CSS

table{       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: #5c6b77;    font-weight: 600;}

JS

const app = new Vue({       el: '#app',    data: {           books: [            {                   id: 1,                name: '《算法导论》',                date: '2009-9',                price: 85.00,                count: 1            },            {                   id: 2,                name: '《UNIX编程艺术》',                date: '2006-7',                price: 59.00,                count: 1            },            {                   id: 3,                name: '《编程珠玑》',                date: '2002-1',                price: 39.00,                count: 1            },            {                   id: 4,                name: '《代码大全》',                date: '2006-3',                price: 128.00,                count: 1            },        ]    },    methods: {           // getFinalPrice(price){           //     return '￥'+price.toFixed(2)        // }        increment(index) {               this.books[index].count++;        },        decrement(index) {               this.books[index].count--;        },        removeHandle(index) {               this.books.splice(index, 1);        }    },    // 过滤器    filters: {           showPrice(price) {               return '￥' + price.toFixed(2)        }    },    computed: {           totalPrice() {               let result = 0;            // 法1：传统方法            // for (let i = 0; i < this.books.length; i++) {               //     result = result + this.books[i].price * this.books[i].count;            // }            // 法2：for index in books            // for(let index in this.books){               //     result += this.books[index].price * this.books[index].count;            // }                        // 法3：for each of books            // for(each of this.books){               //     result += each.price *each.count            // }            // 法4： 直接用高阶函数 reduce            return this.books.reduce(function(pre,book){                   return pre + book.price * book.count;            },0)            return result        }    }})

实现情况如下：