vue实现购物车功能,vuex实现购物车功能
这篇文章主要为大家详细介绍了某视频剪辑软件实现可改变购物数量的购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现改变购物数量的购物车，供大家参考，具体内容如下
效果图：
知识点：
1 .计算计算属性
2 .过滤器过滤器
实现代码：
！声明文档类型
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
标题文档/标题
/头
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
风格
表格{
边框-塌陷：塌陷；
边框间距：0;
边框：1px纯色# ccc
}
td，
th {
填充：8像素16像素
边框：1px纯色# ccc
文本对齐：左对齐；
}
th {
背景色：# f7f7f7
颜色：# 5c6b77
}
/风格
身体
div id=box
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= down(index):disabled= item。姨妈=1-/button {{item。姨妈}}
按钮@click=添加（索引)/按钮
/td
任务描述
按钮@click=删除（索引)移除/按钮
/td
/tr
/tbody
/表格
氘总价：{ { getall price top price } }/H2
/div
h2 v-else您没有购物信息/h2
/div
脚本
const vm=new Vue({
el: #box ，
数据：{
书籍：[{
id: 1，
名称： 《vue.js实战》 ,
日期："2010年2月四日",
价格：82.00,
阿姨：1
}, {
id: 2，
名称： 《javascript实战》 ,
日期："2010年2月四日",
价格：108.00,
阿姨：1
}, {
id: 3，
名称： 《html+css实战》 ,
日期："2010年2月四日",
价格：42.50英镑，
阿姨：1
}, {
id: 4，
名称： 《axios实战》 ,
日期："2010年2月四日",
价格：82.00,
阿姨：1
}, {
id: 5，
名称： 《jquery实战》 ,
日期："2010年2月四日",
价格：65.20,
阿姨：1
}, ]
},
方法：{
添加（索引){
这个。书籍[索引]。阿姨；
},
向下（索引){
这个。书籍[索引]。阿姨-;
},
移除（索引){
this.books.splice(索引，1)
},
},
计算值：{
getallprice() {
设all=0；
对于(设I=0；我这个。书籍。长度；i ) {
all=this.books[i].price * this.books[i].阿姨
}
全部退回
}
},
过滤器：{
最高价格
返回price . to fixed(2)
},
}
})
/脚本
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。