vue实现购物车案例,vuex实现购物车功能案例
这篇文章主要为大家详细介绍了某视频剪辑软件实现购物车的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
今天从网上找了一个购物车的小例子，照着敲了一下，收获不少。下面的用一个小动图展示一下成果：
接下来上代码：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
链接href= CSS/购物车。CSS rel=样式表 type= text/CSS /
标题/标题
/头
身体
div id=应用程序
氘购物清单/h2
div class=" nav "
div span class= no selected v-bind:class= { selected:if all select } @ click= all select(if all select)/span全选/div
差异商品/div
差异数量/div
差异单价（元)/div
差异金额（元)/div
差异操作/div
/div
table class=goods
在需要分行下载处加上
tr v-for=(项目，指数“在货物中”
TD span class=未选择 v-bind:class= { selected:item。是select } @ click=项。是select=！item.isSelect/span/td
任务描述
很好
img v-bind:src=item.gimg /
差异
h3{{item.gname}}/h3
span{{item.gbrand}} nbsp .nbsp{{item.gplace}}/spanbr /
span{{item.gpurity}} nbsp .nbsp{{item.gminnum}}/spanbr /
span{{item.gstore}}/span
/div
/div
/td
TD输入type= number v-model= item。gnum min= 0 //TD
TD span @{ { item。gprice } }/span/TD
TD span @{ { item。gprice *项目。gnum } }/span/TD
TD按钮@ click=删除单个(索引)删除/button/td
/tr
/tbody
/表格
div class=页脚
button @click=deleteSel 删除所选商品/按钮
按钮继续购物/按钮
spanspan{{getTotal.num}}/span件商品（不含运费)总计：span @{ { gettotal。所有价格} }/span/span
按钮去结算/按钮
/div
/div
/div
/body
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
商品：[
{gname:佳洁士美白牙膏，
gbrand:品牌：佳洁士，
gplace:产地：上海，
gpurity:规格：120克，
gminnum:起订量：10件，
gstore:仓库地：上海沧海仓储，
gprice:800 ，
gimg:img/good.jpg ，
gnum:“3”，
isSelect:false，
},
{gname:佳洁士美白牙膏，
gbrand:品牌：佳洁士，
gplace:产地：上海，
gpurity:规格：120克，
gminnum:起订量：10件，
gstore:仓库地：上海沧海仓储，
gimg:img/good.jpg ，
gprice:400 ，
gnum:5 ，
isSelect:false，
}
]
},
计算值：{
//实时判断是否全选
ifAllselect:function(){
var all
for(var I=0；ith。商品。长度；i ){
如果这种货物.isSelect==false){
全部=假
打破；
}
全部=真
}
全部退回；
},
//获取总件数和总金额数
getTotal:function(){
var num=0；
var所有价格=0；
for(var I=0；ith。商品。长度；i ){
如果这种货物.isSelect==true){
num=parse int(num)parse int(this。货物[I].gnum)；
allprice=allprice this.goods .gnum*this.goods[i].gprice
}
}
return{num:num，allprice:allprice}
}
},
方法：{
//全选或者取消全部选中
全部选择：函数(ifAllselect){
for(var I=0；ith。商品。长度；i ){
这种商品isSelect=！ifAllselect
}
},
//删除单个商品
删除单个：函数（索引){
if(this.goods[index].isSelect==true)
this.goods.splice索引，1);
else alert(请选择您要删除的商品!);
},
//删除选中的商品
deleteSel:function(){
this.goods=this.goods.filter(函数（项){return！item.isSelect})
}
}
})
/脚本
/html
*{
填充：0;
边距：0;
}
html，正文{
宽度：100%;
溢出-x:隐藏；
}
#app{
宽度：90%;
边距：50px自动；
边框：1px实心淡灰色
边框顶部：无；
}
h2{
显示：块；
边框顶部：4px纯色道奇蓝；
字体大小：17px
左填充：20px
行高：50px
颜色：道奇蓝；
}。导航{
宽度：100%;
高度：40px
边框：1px实心淡灰色
左边界：无；
右边界：无；
}。导航{
身高：100%;
浮动：左；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。nav div:n-child(1){
宽度：15%;
}。导航分区：第n个子级(2){
宽度：37%;
}。导航分区：第n个子级(3){
宽度：12%;
}。nav div:n-child(4){
宽度：12%;
}。导航分区：第n个子级(5){
宽度：12%;
}。nav div:n-child(6){
宽度：12%;
}。未选择{
显示：内嵌-块；
宽度：17px
高度：17px
右边距：5px
背景：网址（./img/nocheck.png)不重复；
背景-大小：包含；
}。商品{
宽度：100%;
高度：自动；
}。货物运输
宽度：100%;
}。货物运输时间表
填充：20px 0；
}。货物运输时间：第n个子代(1){
宽度：17%;
文本对齐：居中；
}。货物运输时间：第n个子代(2){
宽度：35%;
}。货物运输时间：第n个子代(3){
宽度：12%;
文本对齐：居中；
}。货物运输时间：第n个子代(4){
宽度：12%;
文本对齐：居中；
}。货物运输时间：第n个子代(5){
宽度：12%;
文本对齐：居中；
}。货物运输时间：第n个子代(6){
宽度：12%;
文本对齐：居中；
}。好{
宽度：100%;
显示器：flex
对齐-项目：居中；
}。良好的图像{
宽度：120像素
高度：120像素
浮动：左；
边框：2px实心淡灰色
右边距：30px
}。gooddiv{
字体大小：13px
行高：20px
}。gooddiv h3{
字体大小：11px
边距-底部：5px
}。商品输入[类型=数量]{
宽度：50px
}。商品tr TD:n-child(4)，商品tr TD:n-child(5){
颜色：红色；
}
按钮{
光标：指针；
边框：无；
大纲：无；
背景色：白色；
}。页脚{
显示器：flex
对齐-项目：居中；
宽度：100%;
高度：50px
背景色：# F7F7F7
位置：相对；
}。页脚按钮{
边框：无；
背景色：# F7F7F7
字号：15px
}。页脚按钮：第n个子按钮(1){
左边距：30px
}。页脚按钮：第n个子项(2){
左边距：60px
}。页脚按钮：第n个子按钮(4){
身高：100%;
位置：绝对；
右：0;
填充：0 20像素
背景色：橙色；
}。富特斯潘
位置：绝对；
右：100像素
}。footerspan span{
颜色：红色；
}。已选择{
背景：网址（./img/check.png)不重复；
背景-大小：包含；
}
以上为所有的超文本标记语言和钢性铸铁文件代码。
【总结】
1、computed：此处用计算主要有两个作用。一是判断是否全选。如果全选则添加挑选这一类，如果没有则不添加；二是计算选择的总商品数和总金额。当用户更改商品数量时，总商品数和总金额也随之改变。
2、return返回两个值：第一次接触功能里边返回的值是两个这种情况，这种要通过对象的属性访问方法。例如：
函数添加(a，b){
var和
var sub
返回{
总和：a b，
sub:a-b
}
}
var obj=add(5，2)；
控制台。日志(对象。sum)；
控制台。日志(对象。子)；
3、js的数组方法filter（）：
过滤器()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：过滤器()不会对空数组进行检测。注意：过滤器()不会改变原始数组。
数组。filter(函数(当前值，索引，数组)，thisValue)
当前值：必须。当前元素的值
索引：可选。当前元素的索引值
arr:可选。当前元素属于的数组对象
该值：可选。对象作为该执行回调时使用，传递给函数，用作"这个"的值。如果省略了thisValue，”这个"的值为"未定义"
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。