vue写的购物车详细步骤,vuex实现购物车功能
这篇文章主要为大家详细介绍了某视频剪辑软件编写简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用某视频剪辑软件写出简单的购物车，供大家参考，具体内容如下
代码：
//突出显示的块
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
风格。cl{
边框：1px纯黑；
宽度：300像素
边距：30px
填充：15px
}
/风格
/头
身体
div id=应用程序
项中的div class=cl v-for=(项，索引)
h4{{item.sname}}/h4
button @click=item.sum==0？item.sum==0:item.sum - -/button
span{{item.sum}}/span
button @click=item.sum /button
span{{item.sprice}}元/斤/span
/div
桌子
tr
泰国(泰国)选择/th
泰国(泰国)商品名/th
泰国(泰国)商品数量/th
泰国(泰国)商品价格/th
/tr
tr v-for=(item，index) in items
TD输入类型= checkbox :checked= item。是选择 @ click=项。是select=！item.isSelect/td
td{{item.sname}}/td
td{{item.sum}}/td
td{{item.sprice*item.sum}}/td
/tr
tr
TD input type= checkbox @ click= select product(is select all):checked= is select all 全选/tf
任务描述合计/tf
td{{total.totalNum}}/tf
td{{total.totalPrice}}/tf
/tr
/表格
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本
新Vue({
埃尔： #app ，
数据：{
项目：[
{
sname :苹果，
sum:1，
弹簧: 10 ,
},
{
sname :香蕉，
sum:1，
弹簧: 12 ,
},
{
sname :橘子，
sum:1，
弹簧: 8 ,
},
]
},
方法：{
选择产品：功能(_是选择){
for(var i=0，len=this。项目。长度；ileni ){
这个项目[我]。isSelect=！_ isSelect
}
},
},
计算值：{
isSelectAll:function(){
归还这个。项目。every(function(val){ return val。是选择})
},
总计：函数(){
var prolist=this。项目。filter(function(val){ return val。是select })；
总优先级=0；
总数=0；
for(var I=0；iprolist.lengthi ){
totalpri=prolist[i].sprice*prolist[i].总和；
totalnum=prolist[i].总额
}
return{totalNum:totalnum，totalPrice:totalpri}
}
},
已安装：函数(){
var _ this=this
this.items.map(函数（项目){
_这个. set(item， isSelect ，false)
})
}
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。