vue实现购物车加减

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

那么什么是计算属性呢？

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

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

首先导入包：

接着是布局样式：

 

 
 
 

  

   
  
  

  商品名称
  
  

  商品价格
  
  

  商品数量
  
  

  商品总额
  
  

  操作
  
  
   

    

    
    
 
{{item.shopName}}
 
{{item.shopPrice}}
 

  -
  
  +
 
 

  {{item.shopPrice*item.shopCount}}
 
 

  删除
 
 
 
 
 

  金额总计:{{sum}}
 
 

  商品数量:{{count}}
 
 

 

  

  
  
  

  
  
  

  增加
  
 
 

最后是方法：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。