vue 简单的购物车页面案例

1.效果

2.实现的功能

（1）点击全选购物车所有的商品均被选中，并计算出总金额

（2）取消全选，金额为 0。

（3）增加购物车页面商品的数量，总金额也跟随变化。

（4）购物车商品限购

（5）删除商品

3.实现步骤：

（1）从后台拿到加入了购物车商品的信息。为一个数组。

（2）新建一个列表，用 v-for 遍历这个数组

(3) 给全选按钮添加勾选状态，以及每一单项的状态改变事件

（4）给按钮添加点击事件和禁止按钮条件。

（5）计算总金额。

（6）添加删除事件，，并同步更新状态改变事件。

4.上码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script><style>*{margin: 0;padding: 0;}#content{width: 100%;height: 100%;}.head{height: 60px;margin: 30px 30px;}ul li{display: flex;justify-content: space-around;align-items: center;margin-bottom: 30px;}li img{width: 80px;height: 120px;}footer >p{margin-left: 30px;float: left;}footer >div{margin-right: 30px;float:right;}</style>
</head>
<body><div id="box"><div id="content"><div class="head"><!-- v-model 绑定勾选状态  change() 绑定一个状态改变的事件，状态改变时就触发这个事件--><input v-model ="isAll" @change ="handleChangeAll()" type="checkbox"> 全选/全不选</div><ul><li v-for = "(items,index) in goods" :key = "items.id"><div><!-- v-model 绑定勾选状态 change() 绑定一个状态改变的事件，状态改变时就触发这个事件--><!-- :value="items" 拿到勾选了的内容，方便接下来用勾选了的内容里面包含的价格和数量算总金额。 --><input type="checkbox" v-model = "checklist" :value="items" @change = "handleChange()"></div><img :src="items.pic" alt=""><div><div>{{items.name}}</div><div style="color: red;">${{items.price}}</div></div><div><!-- 当 items.number === 1时，disabled 为真，禁用这个按钮 --><button @click = "items.number--" :disabled = "items.number === 1">-</button><span>{{items.number}}</span><button @click = "items.number++" :disabled = "items.number === items.limit">+</button></div><div><!-- 绑定一个事件，删除 goods列表 中的 第index 项 --><button @click = "handleDeleteClick(index,items.id)">删除</button></div></li></ul><footer><p>合计:{{sum()}}</p>{{checklist}}<div>去付款</div></footer></div></div><script>new Vue({el:'#box',data:{isAll:false,checklist:[], // 拿到勾选了的商品goods:[{name:'JMSHOP 清纯校花 白色针织开衫慵懒风秋装女宽松仿貂毛毛衣外套',price:40,number:1,id:1,limit:5,pic:"../js/img/shop.jpg"},{name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',price:30,number:1,id:2,limit:3,pic:"../js/img/shop2.jpg"},{name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',price:20,number:1,id:3,limit:4,pic:"../js/img/shop3.jpg"},{name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',price:10,number:1,id:4,limit:5,pic:"../js/img/shop4.jpg"},]},methods:{sum(){var total = 0this.checklist.forEach(items => {total += items.price * items.number    });return total},handleDeleteClick(index,id){// 删除 goods 列表中的 第 index 项this.goods.splice(index,1)// 当  checklist 中的 某一个 items 的 id = 删除的 goods 列表第 index 项的 id 时，// 把checklist 这一项过滤掉，然后重新生成 checklist this.checklist = this.checklist.filter(items => items.id !==id)// 每点击删除事件时，触发 handleChange() 事件this.handleChange()},handleChangeAll(){if(this.isAll){this.checklist = this.goods}else{this.checklist = []}},handleChange(){if(this.checklist.length === this.goods.length){this.isAll = true}else{this.isAll = false}}}})</script>
</body>
</html>

vue 简单的购物车页面案例相关推荐

vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
vue简单实现购物车
<template><div><table><thead><tr><!-- 把计算属性的值绑定给 ...
前端Vue项目——购物车页面
一.加入购物车的两种策略 1.加入购物车接口在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...
uni-app/Vue实现购物车页面功能的业务逻辑
uni-app/Vue实现购物车页面功能的业务逻辑用户在商品列表页或者商品详情页进行添加到购物车操作.把此商品需要在购物车渲染的数据整理好一个对象,转存到Vuex中在购物车页面渲染列表数据购物 ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
Vue/vant——未登陆时清空购物车以及拦截未登录的状态拒绝进入购物车页面
cart.js // 清空购物车clearCart(state){state.list = [],state.selectAll = []} axios.js "use strict&quo ...
Vue项目实战：购物车页面实现与ElementUI集成
目录 1. 购物车页面 Order-Header组件购物车列表渲染购物车全选和非全选购物车商品更新和删除购物车结算 2. ElementUI集成 3. Babel介绍购物车页面 (1)Ord ...
简单介绍Vue之vue.$set()方法源码案例
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下在使用vue开发项目的过程中,经常会遇到这样 ...

vue 简单的购物车页面案例

vue 简单的购物车页面案例相关推荐

最新文章

热门文章