vue实现购物车的思路,vuex购物车案例_1

  vue实现购物车的思路,vuex购物车案例

  这篇文章主要为大家详细介绍了某视频剪辑软件实现简单的购物车案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  本文实例为大家分享了某视频剪辑软件实现简单的购物车案例的具体代码,供大家参考,具体内容如下

  代码:

  模板

  差异

  差异

  跨度手机:/span

  跨度价格/span输入类型= number 垂直模型。号码=电话价格

  跨度数量/spaninput type= number v-model。号码=“电话数量”

  跨度小计:/spanspan{{phoneTotal}}元/span

  /div

  差异

  跨度电脑:/span

  跨度价格/span输入类型= number 垂直模型。数字=计算机价格

  跨度数量/spaninput type= number v-model。数字=“计算机计数”

  跨度小计:/spanspan{{computerTotal}}元/span

  /div

  差异

  跨度运费:span输入type= number 垂直模型。数量=运费跨度元/spanbr

  跨度共计:{ {总计}}元/span

  p优惠:{ {折扣}}元/p

  p应付:{{allPrice}}/p

  /div

  /div

  /模板

  脚本

  导出默认值{

  data () {

  返回{

  电话价格: ,//手机单价

  电话计数: ,//手机数量

  计算机价格: ,//电脑单价

  计算机计数: ,//电脑数量

  运费: ,//运费

  折扣:""

  }

  },

  计算值:{

  phoneTotal () {

  返回这个。手机价格*这个。电话计数

  },

  计算机总数(){

  返回这个。电脑价格*这个。计算机计数

  },

  //总价

  total () {

  退回这个。电脑总计这个。电话总计这个。运费

  },

  allPrice () {

  返回这个,总共这个。折扣

  }

  },

  观察:{

  总计:{

  德普:是的,

  处理程序(){

  如果(这个。电话总计这个。这台电脑总共5000英镑。电话总计这个。计算机总计8000){

  这个。折扣=100

  } else if(这个。电话总计这个。计算机总计8000){

  这个。折扣=200

  }

  }

  }

  }

  }

  /脚本

  样式范围语言=少

  /风格

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

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: