vue购物车结算,vue实现购物车数量加减
这篇文章主要为大家详细介绍了某视频剪辑软件实现购物车计算总价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用某视频剪辑软件实现一个购物车计算总价的功能，供大家参考，具体内容如下
代码
超文本标记语言
div id=应用程序
div class=面板面板-信息
div class=面板标题
h3 class=panel-title 购物车/h3
/div
div class=面板-正文
div class=复选框
标签
输入类型=复选框 v-model=checkAll
全选
/标签
/div
ul class=列表组
Li class= list-group-item v-for=(item)in list :key= item。id
div class=复选框
标签
输入类型=复选框v-model=item.checked
{ {项目。name } }-{ { item。price } } * { { item。数量} }
button type= button @ click= item。“数量1，”项目。数量-=1:1
BTNBTN-成功-/按钮
按钮类型=按钮 @ click=项。quantity=1 class= BTNBTN-成功/button
/标签
/div
/李
/ul
p总价：{{sumPrice}}/p
/div
/div
/div
射流研究…
脚本src= ./libs/vue.js/script
脚本
新Vue({
埃尔： #app ，
数据：{
列表：[
{
id: 1，
名称： 小米10,
价格：3999,
已检查：错误，
数量：1
},
{
id: 2，
名称： 荣耀30,
价格：2999,
已检查：错误，
数量：1
},
{
id: 3，
名称： 魅族17,
价格：3699,
已检查：错误，
数量：1
},
{
id: 4，
名称： 苹果11,
价格：5499,
已检查：错误，
数量：1
}
],
},
//计算的计算属性，
//他有一个特点，可以依赖当前数据改变之后进行重新计算
计算值：{
全部选中：{
//设置值，当点击全选按钮的时候触发
设置{
这个。列表。foreach((item)=(item。选中=v))
},
//取值，当列表中的值改变之后触发，需要返回
get() {
返回（
this.list.length===
这个。列表。过滤器((item)=item。已检查).长度
)
}
},
//计算总价，选择被选中的元素
sumPrice() {
返回这个。列表。过滤器((item)=item。已检查).减少((前，当前)={
返回当前价格*当前数量
}, 0)
},
},
方法：{
save() {
控制台。日志(这个。列表。过滤器((item)=item。已检查))
}
}
})
/脚本
结构是用引导程序写的，记得下载并引入文件
链接版本=样式表href= ./bootstrap.min.css
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。