vue购物车的实现,vuex购物车案例
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单购物车的具体代码，供大家参考，具体内容如下
超文本标记语言首页
！声明文档类型
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
标题文档/标题
link rel=样式表 href=/CSS/index。 CSS
/头
身体
div id=应用程序
div v-if=books.length！=0
桌子
四羟乙基己二酰胺
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.price showPrice}}/td
任务描述
button @ click= decrement(index):disabled= item。count=1 -/按钮
{{item.count}}
按钮@click=增量（索引)/按钮
/td
TD按钮@ click=移除句柄(索引)移除/button/td
/tr
/tbody
/表格
氘总价格为：{{totalPrice showPrice}}/h2
/div
h2 v-else购物车为空/h2
/div
script src=/js/vue.js/script
脚本src=/js/index。js /脚本
/body
/html
钢性铸铁代码
* {
边距：0;
填充：0;
}
表格{
边距：100像素0 0 100像素
边框：1px实心# e9e9e9
边框-塌陷：塌陷；
边框间距：0;
}
th，
td {
填充：8像素16像素
边框：1px实心# e9e9e9
文本对齐：左对齐；
}
th {
背景色：# f7f7f7
颜色：黑色；
字体-重量：6000;
}
h2 {
宽度：500像素
左边距：100像素
}
按钮{
填充：5px
}
射流研究…代码(Vue)
const app=new Vue({
埃尔： #app ，
数据：{
书籍：[
{
id:1，
名称： 《算法导论》 ,
日期： 2019-2 ,
价格：85.00,
计数：1
},
{
id:2，
名称： 《计算机基础》 ,
日期： 2019-2 ,
价格：95.00英镑，
计数：1
},
{
id:3，
名称： 《c++高级语言》 ,
日期： 2019-2 ,
价格：89.00,
计数：1
},
{
id:4，
名称： 《编译原理》 ,
日期： 2019-2 ,
价格：77.00英镑，
计数：1
},
]
},
方法：{
减量（指数){
这个。书籍[索引]。数数-
},
增量（指数){
这个。书籍[索引]。数数
},
移除句柄(索引){
this.books.splice(索引，1)
}
},
计算值：{
总价格(){
假设最终价格=0
对于(设I=0；我这个。书籍。长度；i ){
finalPrice=this.books[i]。price * this.books[i].数数
}
返回最终价格
}
},
过滤器：{
显示价格(价格){
返回价格。到固定(2)
}
}
})
运行结果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。