vue购物车,vue购物车功能实现思路
这篇文章主要为大家详细介绍了某视频剪辑软件实现书籍购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现书籍购物车功能的具体代码，供大家参考，具体内容如下
效果图
点击增加、减少购买数量和移除总价格会变化
代码
！声明文档类型
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= app v-斗篷
div v-if=books.length
桌子
四羟乙基己二酰胺
tr
th/th
泰国(泰国)书籍名称/th
泰国(泰国)出版日期/th
泰国(泰国)价格/th
泰国(泰国)购买数量/th
泰国(泰国)操作/th
/tr
/thead
在需要分行下载处加上
tr v-for=(项目，索引)在书籍中
td{{index 1}}/td
td{{item.name}}/td
td{{item.date}}/td
td{{item.price showPrice}}/td
任务描述
！-已禁用为真实的时按钮禁用-
button @ click= reduce(index)" v-bind:disabled= item。count=1 -/按钮
{{item.count}}
按钮@click=增加（指数)/按钮
/td
tdbutton @click=remove(index)移除/button/td
/tr
/tbody
/表格
氘总价格：{{totalPrice showPrice}}/h2
/div
h2 v-else购物车为空/h2
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本
const app=new Vue({
埃尔： #app ，
数据：{
书籍：[
{
名称： 《算法导论》 ,
日期："2021年8月一日",
价格：85.00,
计数：1
},
{
名称： 《UNIX编程艺术》 ,
日期："2021年8月2日",
价格：69.00,
计数：1
},
{
名称： 《编程珠玑》 ,
日期："2021年8月3日",
价格：35.00,
计数：1
},
{
名称： 《DOM编程艺术》 ,
日期："2021年8月四日",
价格：75.00英镑，
计数：1
},
{
名称： 《nodejs深入浅出》 ,
日期："2021年8月5日",
价格：105.00,
计数：1
},
],
},
方法：{
减少（索引){
这个。书籍[索引]。count-；
},
增加（指数){
这个。书籍[索引]。数数；
},
移除（索引){
this.books.splice(索引，1);
},
},
计算值：{
//写在计算属性里的方法可以直接当属性使用
总价格(){
//设总价=0；
//1.普通的为循环
//for(设I=0；我这个。书籍。长度；i ) {
//totalPrice=this.books[i].数数* this.books[i].价格；
//}
//2.步骤稍简单的普通为循环
//for(让我在这本书中){
//totalPrice=this.books[i].数数* this.books[i].价格；
//}
//3.用于（本书的第一项)
//for(let item of this.books){
//总价=项目。计数*项目。价格；
//}
//返回总价格
//4.高阶函数写法减少
//直接返回结果不需要定义变量，也不需要遍历
归还这个。书籍。减少(功能(预，预定){
返回预订前。价格*书。数数；
},0);
},
//过滤器
过滤器：{
显示价格(价格){
返回价格。到固定(2)；
}
}
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。