前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue2.0实现购物车功能

vue2.0实现购物车功能

作者头像
小周sir
发布2019-09-23 16:03:54
1.2K0
发布2019-09-23 16:03:54
举报
文章被收录于专栏:前端技术开发

购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据

功能列表:

1、全选和单选结算

2、减少和增加数量

3、商品的删除

界面搭建以及布局,这里,我直接用bootstrap快速搭建的一个简单的布局

代码语言:javascript
复制
<div class="container" id="app">
            <h2 class="page-header">购物车</h2>
            <table class="table">
                <tr>
                    <th><label><input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length"/>全选</label></th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(cart,index) in cart_list" :key="index">
                    <td><input type="checkbox" :value="cart" v-model="check_goods" /></td>
                    <td>{{cart.goods_name}}</td>
                    <td>{{cart.goods_price}}</td>
                    <td class="col-xs-3">
                        <span class="btn btn-default" v-on:click="reduce(cart)">-</span>
                        <input class="btn-group" type="number" v-model="cart.num" />
                        <span class="btn btn-default" v-on:click="add_num(cart)">+</span>
                    </td>
                    <td>
                        <button class="btn btn-danger" v-on:click="delete_num">删除</button>
                    </td>
                </tr>
            </table>
            <div>
                总计:共 {{cart_list.length    }}件商品,已选择 {{total_num}} 件
                <div class="pull-right">
                    合计:{{total_price}}元
                    <a href="" class="btn btn-success" :disabled="check_goods.length <= 0">去结算</a>
                </div>
            </div>
        </div>

所有的数据都是自己本地写的

代码语言:javascript
复制
data() {
	return {
		cart_list: [{
		  goods_name: '小米6',
		  goods_price: '1699',
		  num: '2',
		},{
		   goods_name: '红米3',
		   goods_price: '699',
		   num: '1',
		},{
		   goods_name: '小米8',
		   goods_price: '2899',
		   num: '1',
		}],
		   check_goods: [] //已选择的商品
	      }
	},

计算属性:

计算出商品中,总价和数量

代码语言:javascript
复制
              computed: {
//				总价
				total_price() {
					let price = 0
                        
					this.check_goods.forEach(item => {
//						总价 = 价格 * 数量
						price += Number(item.goods_price) * Number(item.num)
					})
					return price
				},
//				数量
				total_num() {
					let t_num = 0;
					this.check_goods.forEach(item => {
						t_num += Number(item.num);
					})
					return t_num
				}
			},

 实现商品增加减少,删除功能

代码语言:javascript
复制
              methods:{
//				商品类减减
				reduce(cart) {
					if(cart.num <=0) {
						cart.num = 0
					} else {
						cart.num --
					}
				},
//				商品累加
				add_num(cart) {
					cart.num++
				},
//				删除商品
				delete_num(cart){
					this.check_goods.splice(this.check_goods.indexOf(cart),1)
					this.cart_list.splice(this.cart_list.indexOf(cart),1)
				},
//				全选
				check_all() {
					if (this.check_goods.length >0) {
						this.check_goods = []
					} else {
						this.cart_list.forEach(item => {
							this.check_goods.push(item)
						})
					}
				}
			}

  至此我们的购物车基本功能就完成了,

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档