详细说明用Vue.js开发购物车功能的方法

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

本文介绍了Vue.js开发购物车的方法，分享给大家参考，如下：

购物车通常包含商品名称、单价和数量等信息。数量可随意增减，商品项目可删除，支持全选或多选：

我们将这个小项目分为三个文档：

Index.html(页面)index.js (Vue脚本)style.css(样式)1 index.js

首先在js中初始化Vue实例，整体模板如下：

var app=new Vue({ el: '#app '，data : }.}，mounted : function(){ 0.}，computed: {.}，methods: {.}});一般来说，这里的数据来自服务器端的数据。为了简单起见，这里直接定义了数据：

Data: {/** *购物车商品清单*/list: [{id: 1，名称3360 '韩国进口海苔'，价格： 39.9，count3360 1}，{id3360 2，名称： '印度尼西亚进口Nabati Richoco零食巧克力威化饼干'，价格： 11.8，计数： 1}，{ID : 3，名称：check list :[]}列表用于显示购物车中的商品列表。

核对表用于标明所选商品的清单，稍后，我们将使用它来计算所选商品的总价。

默认选择Mounted:函数(){//this . checkall()；this . check alilement(document . queryselector(')。check all’)；}安装后，默认情况下会选择购物车中的所有商品。

Computed: {/** *总价* @ returns { string } */total price : function(){ var total=0；for(var I=0；i this .核对表. length；i ) { var item=this .核对表[I]；total=item . price * item . count；} return total . ToLocalString()；}}在计算属性中，我们定义了总价的计算方式，将与勾选的核对表绑定，计算总价。之所以使用toLocaleString方法，是因为小数部分会自动四舍五入，用千分之一表示，非常方便，O(_)O~

methods: { /** *减少购买数量* @param index */reduceCount:函数(索引){ if (this.list[index]).计数===1)返回；列表[索引]。计数-;}, /** * 增加购买数量* @param index */addCount:函数(索引){ this.list[index].计数；}, /** * 移除商品* @param index */remove:函数(索引){控制台。日志(' remove-index : '索引)；this.list.splice(索引，1);//获取商品序号var id=索引1;//移除实际参与计算的商品var $核对表=这个。核对表；for(var I=0；一美元核对表。长度；I){ var item=$核对表[一]；if(项目。id==id){ $核对表。拼接(I，1)；} } }, /** * 全选或全不选* @ param事件*/CheckAllorNot :函数（事件){ if (event.target.checked) {//全选这个。CheckAll()；console.log('核对表：“这个。核对表');} else { //全不选console.log('全不选');这个。checkinitems(' Nocheckall ')；这个。核对表。拼接(0)；//清空数组} }, /** * 全选*/checkAll:函数(){ console.log('全选');这个。checkinitems(' CheckAll ')；这个。核对表=这个。名单。concat()；//复制商品列表}, /** * 全选或全不选* @param类型检查所有：全选；其他：全不选*/checkinitems 3360函数（类型){ var items=document。queryselectorall(' .check ITeM ')；for(var I=0；一。项目。长度；I){ var item=items[I]；if(type===' CheckAll '){ item。选中=真；} else { item.checked=false} } }，/** *勾选或不勾选*/checkItem:函数（事件，索引){控制台。日志(' CheckItem ')；定义变量元素=event . target var $ AllCheck=document。查询选择器(' .全部选中’)；if (element.checked) {//勾选，加入已选择列表这个。核对表。推(这个。list[index])；这个。支票等位基因($ all check)；} else {//不勾选，从已选择列表中去除这个。核对表。拼接（索引，1);$ allCheck.checked=false} }，/** *勾选全选框* @ param元素*/check alielements :函数（元素){ //如果所有的商品都已被勾选，则勾选全选框如果(这个。核对表。长度==这个。名单。长度){元素。选中=真；} }}在方法中，我们定义了以下功能方法：

减少与增加购买数量。在减少购买数量方法中，我们对当前所对应商品的数量进行了二次确认，让代码变得更加健壮(HTML模板可能被修改，按钮被替换为差异或者跨度，那么有缺陷的样式就变得无效啦)。

移除某件商品。因为购物车中的商品列表与实际勾选的商品列表数量上有可能存在差异，所以我们必须通过找到商品身份再进行删除。

勾选相关操作（全选、全不选、单选、单不选等)

2 style.css

[v-斗篷]{ display : none；}表格{边框： 1px实心# e9e 9；边界崩溃：崩溃；边框间距： 0;空细胞：显示；} th { font : bold 12px ' Trebuchet MS '，Verdana，Arial，Helvetica，无衬线；color : # 4f 6b 72 border-right : 1px实心# C1DAD7边框-bottom: 1px实心# C1DAD7边框-top: 1px实心# C1DAD7字母间距2 xtext-transform :大写；文本-左对齐：padding: 6px 6px 6px 12px背景# CAE8EA}td {右边框： 1px实心# C1DAD7边框-bottom: 1px实心# C1DAD7背景# ff font-size :14 px；padd : 6px 6px 6px 12pxcolor 3360 # 4f6b 72 }这里定义了v形斗篷样式，用于解决网络慢时的闪屏问题。还定义了表格的相关样式。

3 index.html

接着在index.html中引入某视频剪辑软件脚本与样式文件。基本模板如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题购物车/title link rel='样式表type=' text/CSS ' href=' style。CSS ' rel='外部no follow '/headdydiv id=' app ' v-斗篷./div脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script script src=' http :索引。js '/脚本/正文/html因为有可能购物车中的商品被全部删除，所以我们在此加了判断，如果列表为空，则给出友好提示：

模板v-if='list.length './模板！-当购物车为空时，提示-div v-否则购物车中暂时没有商品/div然后使用表格显示购物车中的商品列表：

表和输入id=' check all ' type=' check all ' class=' check all ' @ click=' check allornot($ event)'/第几个序列号/第几个商品/第几个单价/第几个数量/第几个工序/第几个/tr/表和tbody tr v-for='列表中的'(项目，索引)' t input type=' check item ' class=' check item ' @ click=' check item($ event，索引)'/TD TD { { index 1 } }/TD TD { { item }。count } } button @ click=' addcount(index)'/button/TDT button @ click=' remove(index)' delete/button/TD/tr/t body/table div总价：{{totalPrice}}/div使用v-for指令循环迭代出商品清单。

表中的每个复选框和按钮都与相应的事件绑定。本机DOM事件$event也在“全选”框和每行的复选框中传递，用于获取当前操作的元素。

*在这里，判断减少商品数量的按钮。当对应的商品数量只剩下一个时，禁用的样式必然会使其不可用。

4演示