vuex实现购物车功能案例,vue.js购物车案例
这篇文章主要为大家详细介绍了vue。j框架实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue。j框架实现购物车的具体代码，供大家参考，具体内容如下
！声明文档类型
html lang= en xmlns:v-on= http://www。w3。 org/1999/XHTML
头
meta charset=UTF-8
标题标题/标题
脚本src=./lib/vue.min.js/script
/头
身体
div id= app style= position:relative；左：30%
表格单元格填充=10
四羟乙基己二酰胺
thinput type= checkbox v-model= CB v-on:click= all select 全选/th
泰国(泰国)名称/th
泰国(泰国)单价/th
泰国(泰国)数量/th
泰国(泰国)金额/th
泰国(泰国)操作/th
/thead
在需要分行下载处加上
tr v-for=x in info
TD输入类型= checkbox v-model= x . BOL v-on:click= sign()/TD
td{{x.name}}/td
td{{x.price}}/td
TD输入type= number v-model= x . num min= 0 style= width:50px；text-align:center v-on:click= count(x) v-on:change= count(x)/TD
td{{x.total}}/td
tdbutton v-on:click=del(x)删除/button/td
/tr
/tbody
/表格
溴
p总金额：{{all}}/p
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
所有：0,
cb:假的，
信息：[{
bol:假的，
名称： iphone7 ，
价格：6000,
数字：1,
总计：6000
}, {
bol:假的，
名称： 荣耀6x ，
价格：1200,
数字：1,
总计：1200
}, {
bol:假的，
名称："戴尔"笔记本，
价格：4000,
数字：1,
总计：4000
}]
},
方法：{
//计算单价
计数：函数（对象){
for(var I=0；我这个。信息。长度；i ) {
//
if(this.info[i]==obj) {
this.info[i].总计=对象。价格*对象。num
}
//如果被选中了，就计算总价格
如果(对象bol)
这个。all select()；
}
}
},
//删除
del: function(obj) {
这个。信息。拼接(这个。信息。(obj，1)的索引
这个。all count()；
},
//单选
符号：函数(){
这个。all count()；
},
//全选
allSelect: function() {
for(var I=0；我这个。信息。长度；i ) {
this.info[i].bol=this.cb
}
这个。all count()；
},
//计算总价
allCount: function() {
//每次计算总价都要清空
这个。all=0；
for(var I=0；我这个。信息。长度；i ) {
//计算选中的商品
if(this.info[i].bol) {
this.all=this.info[i]。总计；
}
}
}
}
})
/脚本
/body
/html
效果图：
更多文章可点击《Vue.js前端组件学习教程》阅读。
vue.js组件教程请点击专门的vue.js组件学习教程进行学习。
更多vue学习教程请阅读主题《vue实战教程》。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。