vuex实现购物车功能,vue写的购物车详细步骤
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单购物车功能的具体代码，供大家参考，具体内容如下
1.实现效果：
2.涉及到的知识点：
保留小数函数、过滤器、减少高阶函数、v-bind:禁用、v-if
3.代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题书籍购物车案例/标题
风格
表格{
边框：1px实心# e9e9e9
边框-塌陷：塌陷；
边框间距：0;
}
th，td {
填充：8像素16像素
边框：1px实心# e9e9e9
文本对齐：左对齐；
}
th {
背景色：# f7f7f7
颜色：# 5c6b77
字体粗细：600;
}
/风格
/头
身体
div id=应用程序
div v-if=books.length
桌子
四羟乙基己二酰胺
tr
th/th
泰国(泰国)书籍名称/th
泰国(泰国)出版日期/th
泰国(泰国)价格/th
泰国(泰国)购买数量/th
泰国(泰国)操作/th
/tr
/thead
在需要分行下载处加上
tr v-for=(项目，索引)在书籍中
td{{item.id}}/td
td{{item.name}}/td
td{{item.date}}/td
TD @{ { item。价格最终价格} }/TD
任务描述
button @ click= item。count-:disabled=项。count=1 -/按钮
{{item.count}}
button @ click= item。计数/按钮
/td
TD按钮@ click= BTN删除(索引)移除/button/td
/tr
/tbody
/表格
氘总价格：{{sumPrice finalPrice}}/h2
/div
第五部分-elseh2购物车为空/h2/div
/div
脚本src=././js/vue.js/script
！-script src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本-
脚本
const app=new Vue({
埃尔： #app ，
数据：{
书籍：[
{
id: 1，
名称： 《算法导论》 ,
日期："2006年9月",
价格：85.00,
计数：1
},
{
id: 2，
名称： 《算法导论》 ,
日期："2006年9月",
价格：85.00,
计数：1
},
{
id: 3，
名称： 《算法导论》 ,
日期："2006年9月",
价格：85.00,
计数：1
},
{
id: 4，
名称： 《算法导论》 ,
日期："2006年9月",
价格：85.00,
计数：1
},
{
id: 5，
名称： 《算法导论》 ,
日期："2006年9月",
价格：85.00,
计数：1
}
]
},
方法：{
btndelete(索引){
this.books.splice(索引，1);
}
},
过滤器：{
最终价格（价格){
返回价格。到固定(2)；
}
},
计算值：{
sumPrice(){
//计算价格法1:
//设sum=0；
//for(let book of this.books) {
//sum=book。价格*书。数数；
//}
//返回总额
//计算价格法2,使用减少函数。
归还这个。书籍。减少((预值，账面)=预值账面。伯爵*书。价格)，0)；
}
}
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。