一个简单书籍购物车的例子--练习

实现的结果界面如下：购买数量可以进行对应的增加减少，当减少到1时，则不能继续进行减少操作，点击移除可以移除对应的书籍，若购物车中没有书籍后，则显示购物车为空。

index.html页面代码：

    
    
    




    
        {value}}-->
                

            

            

                

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

            

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

                    
                    -
                    {{item.count}}
                    +
                
                

                    移除
                
            
            
        
        总价格：{{totalPrice | showPrice}}
    

    
购物车为空

 index.js页面代码：

const app = new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                name:'《算法导论》',
                date:'2006-9',
                price:85.00,
                count:1
        },
            {
                id:2,
                name:'《Linux编程艺术》',
                date:'2006-3',
                price:59.00,
                count:1
            },
            {
                id:3,
                name:'《编程珠玑》',
                date:'2008-10',
                price:39.00,
                count:1
            },
            {
                id:4,
                name:'《代码大全》',
                date:'2006-3',
                price:128.00,
                count:1
            }]
    },
    methods:{
        increment(index){
            // console.log('increment',index);
            this.books[index].count++

        },
        decrement(index){
            // console.log('decrement',index);
            this.books[index].count--
        },
        removeHandle(index){
            // console.log('index');
            this.books.splice(index,1)
        }
    },
    //computed：计算属性
    computed:{
        totalPrice(){
    //计算总价格有4种方式

            // 1.方式1：普通for循环
            // let totalPrice=0;
            // for(let i=0;i 
style.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;
}
 

                
        
        

  
    
      
        
      
      
        
          暑期编程PK赛
          
        
        得CSDN机械键盘等精美礼品！