vue购物车的实现,vuex购物车案例
这篇文章主要为大家详细介绍了某视频剪辑软件实现简易购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简易购物车的具体代码，供大家参考，具体内容如下
先来看一下完成后的效果吧。
CSS 部分
这里没什么好说的，就是v形斗篷这一个知识点
表格{
边框：1px实心# e9e9e9
边框-塌陷：塌陷；
边框间距：0;
}
th，td{
填充：8像素16像素
边框：1px实心# e9e9e9
文本对齐：居中；
}
th{
背景色：# f7f7f7
颜色：# 5c6b77
字体粗细：600;
}
[v形斗篷]{
显示：无；
}
HTML部分
这里说明一些用到的一些某视频剪辑软件的知识点：
控制显示
迭代
v形斗篷
v-on @
虚拟绑定：
方法方法
计算属性计算
过滤器过滤
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题购物车/标题
link rel=样式表 href= style。 CSS
/头
身体
div id= app v-斗篷
div v-if=books.length
桌子
四羟乙基己二酰胺
tr
th/th
泰国(泰国)书籍名称/th
泰国(泰国)出版日期/th
泰国(泰国)价格/th
泰国(泰国)购买数量/th
泰国(泰国)删除/th
/tr
/thead
在需要分行下载处加上
tr v-for=(项目，索引)在书籍中
th{{item.id}}/th
th{{item.name}}/th
th{{item.date}}/th
！-方案一保留小数点和货币符号-
！-第{ { 项。价格。到固定的(2)} }/th-
！-方案二-
！-th { {获取最终价格(项目。价格)} }/th-
！-方案三-
th{{item.price showPrice}}/th
泰国(泰国)
button @ click= decrement(index):disabled= item。count=0 -/按钮
{{item.count}}
按钮@click=增量（索引)/按钮
/th
th按钮@ click=删除句柄(索引)移除/button/th
/tr
/tbody
/表格
氘总价格：{{totalPrice showPrice}}/h2
/div
h2 v-else
购物车为空
/h2
/div
/body
脚本src=./js/vue.js/script
script src=main.js/script
/html
JS部分
const app=new Vue({
埃尔： #app ，
数据：{
书籍：[
{
id:1，
名称： 《算法导论》 ,
日期："2006年9月",
价格：85.00,
计数：1
},
{
id:2，
名称： 《UNIX编程艺术》 ,
日期："2006年2月",
价格：50.00,
计数：1
},
{
id:3，
名称： 《编程艺术》 ,
日期："2008年10月",
价格：39.00,
计数：1
},
{
id:4，
名称： 《代码大全》 ,
日期："2006年3月",
价格：128.00,
计数：1
},
]
},
方法：{
//这里我们放弃使用方法的形式来求总价格，转而使用计算属性，因为它的效率更高。
//getFinalPrice(price){
//返回固定价格(2)
//},
增量（指数){
这个。书籍[索引]。数数
},
减量（指数){
这个。书籍[索引]。数数-
},
移除句柄(索引){
this.books.splice(索引，1);
}
},
计算值：{
总价格(){
//方案一：普通的为循环
//设总价=0；
//for(设I=0；这是。书籍。长度；i ){
//totalPrice=this.books[i].price * this.books[i].数数
//}
//返回总价格
//方案二：对于在
//设总价=0；
//for(让我在这本书中){
////控制台。日志(一)；//1 2 3 4
//totalPrice=this.books[i].price * this.books[i].数数
//}
//返回总价格
//方案三：对于的
//设总价=0；
//for(let item of this.books){
////控制台。日志(项目)；//这里拿到的就是数组里的每个对象
//总价格=item.price * item.count
//}
//返回总价格
//方案四：减少
归还这个。书籍。减少(功能(前值，账面){
//控制台。日志(书)；//分别输出四个对象
返回preValue book.price * book.count
}, 0)
}
},
//过滤器
过滤器：{
显示价格(价格){
返回价格。到固定(2)
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。