vue实现购物车加减

这篇文章主要为大家详细介绍了vue实现购物车加减,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现购物车加减的具体代码,供大家参考,具体内容如下

通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难。因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。

那么什么是计算属性呢?

计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新。
实现的效果图如下:

我是使用了bootstrap跟Vue去完成这个效果的。

首先导入包:

 

接着是布局样式:

 
商品名称 商品价格 商品数量 商品总额 操作
{{item.shopName}}{{item.shopPrice}} {{item.shopPrice*item.shopCount}}

金额总计:{{sum}}

商品数量:{{count}}


最后是方法:

 

通过以上的代码即可实现简单的购物车加减与增加删除!

以上就是vue实现购物车加减的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程