2018-09-20组件购物车

作者: LYH2312 | 来源:发表于2018-09-20 08:25 被阅读0次

Vuex(二) —— 用Vuex完成购物车案例
2018-09-20用组件做出购物车
2018-09-20组件购物车
13.vue父组件调子组件方法
Web前端-Vue.js必备框架（五）
VUE组件（应用）
2018-12-09
组件-购物车
购物车组件
vuex购物车的实现具体流程

1.配合bootstrap使用的购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
   <div id='app'>
       <my-father></my-father>
   </div>
    <script src='js/vue.js'></script>
    <script>
        Vue.component('my-father',{
            template:`
              <div class='container'>
               <table class='table table-bordered text-center'>
                  <thead>
                      <tr>
                         <th class='text-center'>编号</th>
                         <th class='text-center'>名称</th>
                         <th class='text-center'>单价</th>
                         <th class='text-center'>数量</th>
                         <th class='text-center'>小计</th>
                       </tr>
                  </thead>
                   <my-child v-bind:product='goods'></my-child>
               </table>
             </div>
            `,
            data:function(){
                return{
                    goods:[
                        {pname:'apple',price:3,count:1,sub:3},
                        {pname:'pear',price:4,count:1,sub:4},
                        {pname:'orange',price:5,count:1,sub:5}
                    ]
                }
            }
        })
       
        Vue.component('my-child',{
            props:['product'],
            template:`
                <tbody>
                  <tr v-for="(value,index) in product">
                     <td>{{index+1}}</td>
                     <td>{{value.pname}}</td>
                     <td>{{value.price}}</td>
                     <td>
                          <button @click='add(index)'>+</button>
                          <span>{{value.count}}</span>
                         <button @click='redu(index)'>-</button> 
                      </td>
                     <td>{{value.sub}}</td>
                  </tr>
                  <tr>
                      <td colspan=5>总价:{{sum}}</td>
                  </tr>
                </tbody>
            `,
            data:function(){
                return{
                    sum:12
                }
            },
            methods:{
                add:function(ind){
                    this.product[ind].count++;
                    //小计、
                    this.product[ind].sub=this.product[ind].count*this.product[ind].price;
                    this.countSum();
                     
                },
                redu:function(ind){
                    if(this.product[ind].count>1){
                       this.product[ind].count--;
                    }
                    //小计
                      this.product[ind].sub=this.product[ind].count*this.product[ind].price;
                     this.countSum();
                },
                countSum:function(){
                    for(var i=0,total=0;i<this.product.length;i++){
                        total+=this.product[i].sub;
                    }
                    this.sum=total;
                }
                
                
            }
        })
        
        
        new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

样式如下：

1.png