简易购物车

文章目录

简易购物车
- v-model双向数据绑定 && 表单提交
- 计算属性computed
- v-for渲染数据和标签
- 添加和删除功能

效果图：

v-model双向数据绑定 && 表单提交

<form @submit.prevent="submit"><label for="inputText">商品名：</label><input class="inputText" type="text" v-model="tempGoods.goods"><label for="inputText">购买数量：</label><input class="inputText" type="number" v-model="tempGoods.count"><button>添加</button>
</form>

注意点如下

form标签里写了@submit.prevent=“submit”，button里面就不需要再写了@click=“submit”
购买数量是数值，type=“number"
可以用一个对象来接收表单里填写的数据，实际开发时，大多数都会使用对象的形式来传输数据。看看JSON数据格式就知道了。
```
 tempGoods: {goods: "",price: 8,//价格固定，写死为8元/个count: 0,},
```

计算属性computed

<h1>总价：{{totalPrice}}</h1>

注意点如下

不要写成这个样子

<h1 v-model="totalPrice">总价：{{totalPrice}}</h1>

返回totalPrice值

computed: {totalPrice() {let sum=0;for (var i = 0; i < this.goodsList.length; i++) {sum += this.goodsList[i].price * this.goodsList[i].count;}return sum;}}

computed里的totalPrice要写成函数的形式
必须用一个临时变量sum接收totalPrice的值
计算totalPrice也可以用forEach循环
如果是将sum写为了this.totalPrice，则会出现如下错误

v-for渲染数据和标签

        <ul><li v-for="(item,index) in goodsList">//item和index顺序不能写反商品名：{{goodsList[index].goods+" "}} 价格：{{goodsList[index].price+" "}}元/个<button @click="decrease(index)">- 1</button><span>数量：{{goodsList[index].count}}</span><button @click="increase(index)">+ 1</button></li></ul>

添加和删除功能

添加功能：通过表单拿到的数据：将整个对象追加到要渲染的数据goodsList中

//添加要购买的商品
submit() {          //通过push函数将表单数据，追加到自己的渲染页面的数据   this.goodsList.push({goods: this.tempGoods.goods.toString(),price: this.tempGoods.price,count: this.tempGoods.count,})},//goodsList数据渲染页面的数据goodsList: [{goods: "雪梨",price: 2,count: 1,}, {goods: "糍粑",price: 5,count: 1,}, {goods: "冰糖",price: 9,count: 1,},]

删除功能：从数组中删除数据

//减少预购买的商品数量
decrease(i) {this.goodsList[i].count--;if (this.goodsList[i].count <= 0) {this.goodsList.splice(i, 1);//通过splice函数删除数据，移除购物车里，购买数量为0的商品}}

看了b站上的视频，一个简易购物车的视频，感觉挺有意思的，心想挺简单的，刚好可以复习一下Vue3的知识点，就试着敲了一下，发现有些知识点快忘了，发文记录一下自己碰到的问题，。下面的连接里有详细讲解，小伙伴感兴趣的可以看一下原版视频，跟着敲一下，收获会更大哟。

B站教学视频

Vue3简易购物车--添加和删除商品，计算购买商品总价相关推荐

计算购买商品总金额的程序
计算购买商品总金额的程序学习Java的过程中,我在书上看到了一个例题,设计一个计算购买商品总金额的程序.书上的代码在我看来并不是很好,因为它的数据是被定死的,那么我们就来改进一下书上的代码,将其 ...
jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...
原生js实现购物车添加删除商品、计算价格功能
购物车功能需求: 根据数据创建购物车内容: 实现购物车添加商品功能: 实现购物车商品数量的增加.减少: 实现购物车商品的删除功能: 购物车的全选功能: 无货商品不可修改数量.不计入总价: 底部计算总 ...
购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）
一. 全选按钮分析: 里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走. 因为checked是复选框的固有属性,此时我们需要利用prop()方 ...
Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）
使用方法 : toFixed(2) 保留俩位小数 splice(index,howmany) 删除商品 index 规定添加删除的位置 ,howmany 删除几个 border-collapse: c ...
创建购物车类，模拟购物车功能 1)添加商品到购物车（输入商品的编号和数量） 2)删除商品（删除购物车中的指定购物项） 3) 修改商品（修改商品的数量）4)显示所购买的商品信息（按商品的总价进行升序显
import java.util.Objects;/*** @Author: 廾匸* @Date: 2020/11/18 18:32* @Description: 商品类* @version: 1.0 ...
vue3仿写简易购物车
这是一个按着千锋kerwin老师的视频写的简易购物车,用vue3写的,软件用vscode,详细视频资源见链接引入vue3的地址 <script type="text/javascri ...
Android 中编写一个简易购物车，商品包括商品名称，单价，数量，可以对商品进行增删改查功能。（ArrayList，SQLite）
Android 中编写一个简易购物车,商品包括商品名称,单价,数量,可以对商品进行增删改查功能.(ArrayList,SQLite) 布局(activity_main.xml): <?xml v ...
宜立方商城—— 购物车增加、删除、修改数量、删除选中商品和清空购物车的实现
1. 购物车的实现 1.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以指定购买商品的数量. 3.展示购物车列表页面 4.修改购物车商品数量 5.删除购物车商品模 ...

Vue3简易购物车--添加和删除商品，计算购买商品总价