vuex实现购物车功能案例,vuejs购物车
这篇文章主要为大家详细介绍了某视频剪辑软件组件简易模拟实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件组件模拟实现购物车的具体代码，供大家参考，具体内容如下
代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src= ./lib/vue-2.4.0.js/script
风格
#app{
宽度：600像素
}
#我的表格{
宽度：500像素
边框-塌陷：塌陷；
}
td，th{
文本对齐：居中；
字体大小：20px
边框：2px纯黑；
}
td{
高度：40px
}
输入{
宽度：30px
文本对齐：居中
}
/风格
/头
身体
div id=应用程序
我的车/我的车
/div
脚本
var MyCommmodity={
道具：[list]，
模板：` 1
差异
button @click=baicai 白菜/按钮
按钮@click=蔡庆青菜/按钮
button @click=luobo 萝卜/按钮
/div
`,
方法：{
baicai: function(){
var Cai={ }；
蔡。id=4；
cai.name=白菜
蔡。价格=3；
蔡。num=1；
this.list.push(蔡)
},
蔡庆：函数(){
var Cai={ }；
蔡。id=5；
cai.name=青菜
蔡。价格=6；
蔡。num=1；
this.list.push(蔡)
},
微博：函数(){
var Cai={ }；
蔡。id=6；
cai.name=萝卜
蔡。价格=8；
蔡。num=1；
this.list.push(蔡)
}
}
}
var MyTable={
道具：[列表,旗帜],
模板：` 1
表id=我的表
tr
泰国(泰国)编号/th
泰国(泰国)名称/th
泰国(泰国)单价/th
泰国(泰国)数量/th
泰国(泰国)操作/th
/tr
tr :key=item.id v-for=列表中的项目
td{{item.id}}/td
td{{item.name}}/td
td{{item.price}}/td
任务描述
button:disabled= flag @ click= sub(item。id)-/按钮
输入类型=text :值=项。num @ blur=更改num(item。 id，$event)
按钮@click=添加(item . id)/按钮
/td
任务描述
button @click=del(item.id)删除/按钮
/td
/tr
/表格
`,
方法：{
changeNum:函数(id，事件){
这个发出( change-num ，{
id: id，
类型：更改，
数字：事件。目标。值
});
},
子：函数(id){
这个发出( change-num ，{
id: id，
类型：" sub "
})
},
添加：函数(id){
这个发出( change-num ，{
id: id，
键入："添加"
})
},
德尔：函数(id){
//alert(id)；
这个emit(del-cart ，id)
}
}
}
var MyPrice={
道具：[list]，
模板：` 1
差异
跨度结算：/span
span{{total}}/span
/div
`,
计算值：{
总计：函数(){
var t=0；
this.list.forEach(item={
t=项目。价格*项目。num
});
return t；
}
}
}
Vue.component(我的购物车,{
data () {
返回{
标志：假，
列表：[{
id: 1，
名称： 猪，
价格："10英镑",
数字：1,
},
{
id: 2，
名称： 牛，
价格： 11 ,
数字：1,
},
{
id: 3，
名称： 鸡，
价格： 13 ,
数字：1,
}]
}
},
模板：` 1
差异
我的商品：list= list /我的商品
my-table:list= list :flag= flag @ change-num= changeNum($ event) @ del-cart= del cart($ event)/my-table
我的价格：list= list /我的价格
/div
`,
组件：{
我的表：我的表，
我的价格：我的价格，
我的商品：我的商品，
},
方法：{
changeNum:函数(瓦尔){
if(val.type===change){
this.list.some(item={
if(item.id==val.id){
项目。num=val。num
返回真实的
}
});
}else if(val.type===sub){
this.list.some(item={
if(item.id==val.id item.num 0){
项目。num-=1；
返回真实的
}
});
}else if(val.type===add){
this.list.some(item={
if(item.id==val.id){
项目。num=1；
返回真实的
}
});
}
},
戴尔卡特：函数(id){
var指数=这个。列表。查找索引(项目={
返回项目。id==id
})
this.list.splice(索引，1)
}
}
})
var vm=new Vue({
埃尔： #app ，
数据：{
}
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。