原创文章,Vue实现电商购物车,增加商品数量,总价的计算

gwc.png

HTML部分代码:

 

  <div id="app" v-cloak>

     <template v-if="list.length">

         <table>

             <thead>

             <tr>

                 <th>商品序号</th>

                 <th>商品名称</th>

                 <th>商品价格</th>

                 <th>商品数量</th>

                 <th>操作</th>

             </tr>

             </thead>

             <tbody>

                <tr v-for="(item,index) in list " :key="index">

                      <td>{{item.id}}</td>

                      <td>{{item.name}}</td>

                      <td>{{item.price}}</td>

                      <td>

                          <button @click="handleReduce(index)" :disabled="item.count===0">-</button>

                           {{item.count}}

                          <button @click="handleAdd(index)">+</button>

                      </td>

                      <td><button @click="handleRemove(index)">移除</button></td>

                </tr>

             </tbody>

         </table>

         <div class="total">总价: ¥{{priceTotal}}</div>

     </template>

      <div v-else class="none">您还没有购买书籍或者视频,请您去登录学堂购买</div>

  </div>

CSS代码:

[v-cloak] {

    display:none;

}

.none {

    color:#0e8c8c;

}

table {

    border:1px solid #0e8c8c;

    border-collapse: collapse;

    border-spacing: 0;

    empty-cells: show;

}

th,td {

   padding:8px 16px;

    border:1px solid #0e8c8c;

    text-align: left;

}

th {

    font-weight:700;

    background: #0e8c8c;

    color:#E9E9E9;

    white-space: nowrap;

}

button{

    color:#0e8c8c;

}

.total {

    color:#0e8c8c;

    font-weight:700;

    margin:12px 0 0 200px;

}

JS部分代码:

  

var app = new Vue({

    el:'#app',

    data:{

        list:[

            {

                id:1,

                name:'登录学堂',

                price:600,

                count:0

            },

            {

                id:2,

                name:'denglu.net',

                price:500,

                count:0

            },

            {

                id:3,

                name:'www.denglu.net',

                price:1000,

                count:0

            }

        ]

    },

    computed:{

        priceTotal:function () {

            var priceTotal=0;

            for(var i=0;i<this.list.length;i++){

                priceTotal+=this.list[i].price*this.list[i].count;

            }

            return priceTotal.toString().replace(/\B(?=(\d{3})+$)/g,',')

        }

    },

    methods:{

        handleReduce:function (index) {

            if(this.list[index].count===0) return;

            this.list[index].count–;

        },

        handleAdd:function (index) {

            this.list[index].count++;

        },

        handleRemove:function (index) {

            this.list.splice(index,1);

        }

    }

})


未经允许不得转载:登录学堂 » 原创文章,Vue实现电商购物车,增加商品数量,总价的计算
微信公众号:这是个测试
关注我们,每天分享更多有趣的事儿,有趣有料!
10000+人已关注
分享到:
赞(0) 打赏站长

评论抢沙发

评论前必须登录!

切换注册

登录

忘记密码 ?

切换登录

注册