专栏首页算法与编程之美Html|Vue实战小项目-购物车

Html|Vue实战小项目-购物车

在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进行增减、删除已添加至购物车的商品。

步骤

首先新建一个html文件,进行引入Vue.js与html代码编写,效果图如上。

一、单个商品的价格计算

单个商品数量可以增减,但最少数量为1,而且数量的变化也会引起价格的变化。数量的变化通过点击+或-去调用add或reduce方法,+的时候数量加1,-的时候数量减1,并且在单个商品金额的地方调用计算单个商品总结的方法。

reduce: function (index) {  //减少商品

this.list[index].count --;

},

add: function (index) { //增加商品

this.list[index].count ++;

},

ofPrice: function (index) { //计算单个商品总价

  let ofPrice = 0;

ofPrice+=(this.list[index].price*this.list[index].count);

   return ofPrice.toString();

}

二、选择商品

在购物车里,可以选择想要结算的商品进行最后价格结算,商品总金额为已选择的商品的金额之和。需要绑定单选按钮的选中状态,选中为true,再次点击状态取反。

<td> // 单选商品 <input type="checkbox" :checked="item.check" @click="item.check = !item.check"> </td> <th>全选<input id="all" @click="selAll" type="checkbox" checked></th>

selAll: function () { //商品全选 let isAll = document.querySelector('#all'); if (isAll.checked == true) { this.list.forEach(function(item, index) { item.check = true; }) } else { this.list.forEach(function(item, index) { item.check = false; }) } },

上面是商品的选择,还需要计算已选择商品的价格之和。

totalPrices: function () { //计算总价 let totalPrices = 0; this.list.forEach(function (val, index) { if (val.check == true) //遍历商品,如果选中就进行计算。 totalPrices += parseFloat(val.price * val.count); }) return totalPrices.toString(); },

三、删除商品

点击每个商品后的移除后就会将该商品从商品列表中删除

remove: function (index) { //移除商品 this.list.splice(index, 1); },

四、完整代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-cloak> <template v-if="list.length"> <table> <thead> <tr> <th>全选<input id="all" @click="selAll" type="checkbox" checked></th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>金额(元)</th> <th>操作</th> </tr> </thead> <tbody> <template v-for="(item, index) in list"> <tr> <td> <input type="checkbox" :checked="item.check" @click="item.check = !item.check"> </td> <td> {{ item.name }} </td> <td> {{ item.price }} </td> <td> <button @click="reduce(index)" :disabled="item.count == 1">-</button> {{ item.count }} <button @click="add(index)">+</button> </td> <td> {{ ofPrice(index) }} </td> <td> <button @click="remove(index)">移除</button> </td> </tr> </template> </tbody> </table> <div>总价: ¥ {{ totalPrices }}</div> </template> <template v-else> 购物车没有商品 </template> </div> <script src="../js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: '矿泉水', price: 2, count: 1, check: true, }, { id: 2, name: '口香糖', price: 2.5, count: 1, check: false, }, { id: 3, name: '可乐', price: 3, count: 1, check: true, }, ] }, methods: { remove: function (index) { //移除商品 this.list.splice(index, 1); }, reduce: function (index) { //减少商品 this.list[index].count --; }, add: function (index) { //增加商品 this.list[index].count ++; }, selAll: function () { //商品全选 let isAll = document.querySelector('#all'); if (isAll.checked == true) { this.list.forEach(function(item, index) { item.check = true; }) } else { this.list.forEach(function(item, index) { item.check = false; }) } }, ofPrice: function (index) { //计算单个商品总价 let ofPrice = 0; ofPrice += (this.list[index].price * this.list[index].count); return ofPrice.toString(); } }, computed: { totalPrices: function () { //计算总价 let totalPrices = 0; this.list.forEach(function (val, index) { if (val.check == true) totalPrices += parseFloat(val.price * val.count); }) return totalPrices.toString(); }, } }) </script> </body> </html>

END

主 编 | 王文星

责 编 | 刘玉江

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘玉江

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python基础 | 快速实现label_to_index

    在做机器学习分类问题的时候,经常需要将标签名转换为对应的索引。什么是label_to_index问题?下面将通过一个案例来详细说明。

    算法与编程之美
  • 深入理解JSP(一)

    在Java Web的开发过程中,可能有过这样的疑问,Tomcat是一个Servlet运行环境(容器),所有经过Tomcat的请求都是由一个Servlet来处理的...

    算法与编程之美
  • 网页|JS实现3D旋转相册

    3D旋转相册是通过perspective属性的盒子1产生向网页内部的延伸感,并让装有图片沿z轴平移后的盒子2在拥有perspective属性的盒子1内凭tran...

    算法与编程之美
  • JS的内建函数reduce

    @(js) reduce函数,是ECMAScript5规范中出现的数组方法。在平时的工作中,相信大家使用的场景并不多,一般而言,可以通过reduce方法实现的逻...

    欲休
  • Fastadmin使用—新增可视化数据

    在fastadmin开源项目中,首页有可视化配图,看起来很酷炫.那么,如果自己想做自己的可视化使徒.有需要怎么做呢?

    桑先生
  • wepy repeat标签循环渲染bug解决

    子组件的show控制这个子组件的是否展示的状态,当我们绑定了点击事件之后,点击其中一个子组件。全部几个用repeat渲染出来的子组件都会同时消失或者显示,而不是...

    flytam
  • js节流函数和js防止重复提交的N种方法

    应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之...

    Java中文社群_老王
  • js节流函数和js防止重复提交的N种方法

    Java中文社群_老王
  • 前端-part5-部分JS函数,内置模块和方法

    少年包青菜
  • React的小案例:&amp;&amp;运算符、元素变量、三目运算符与React的条件渲染都在这里了

    用户1272076

扫码关注云+社区

领取腾讯云代金券