vue 实现购物车总价计算


Posted in Javascript onNovember 06, 2019

效果如下所示:

vue 实现购物车总价计算

js

<script type="text/javascript">

 window.οnlοad=function () {
  var vm = new Vue({
   el:'#huo',
   data:{
    myList:[
     {
      number:0,
      price:23
     },
     {
      number:0,
      price:14.5
     },
     {
      number:1,
      price:8
     },
     {
      number:0,
      price:20
     }
    ],
    total:0, //总价
    bestValue:0 //最贵单价
   },
   methods:{
    //相减
    sub:function (item) {
     item.number--;
     if(item.number <= 0){
      item.number = 0
     }
     this.count()
    },
    //相加
    add:function (item) {
     item.number++;
     this.count()
    },
    count:function () {
     var totalPrice = 0;//临时总价
     var best = 0;//临时最大单价
     this.myList.forEach(function (val,index) {
      totalPrice += val.number*val.price;//累计总价
      //判断最大单价
      if(val.price>best && val.number>0){
       best = val.price
      }
     });
     this.total =parseFloat(totalPrice);
     this.bestValue = parseFloat(best);
    }
   },
   created:function(){ 
    this.count();
   }
  })
 }

</script>

html

<div id="huo">
 <ul id="list">
  <li v-for="item in myList">
   <input type="button" value="-" @click="sub(item)"/>
   <strong>{{item.number}}</strong>
   <input type="button" value="+" @click="add(item)"/>
   单价:<em>{{item.price}}</em>
   小计:<span>{{item.number*item.price}}</span>
  </li>
 </ul>
 <p id="p">
  总价:<strong style="margin-right: 20px">{{total}}元</strong>
  最贵的单价是:<em>{{bestValue}}元</em>
 </p>
</div>

以上这篇vue 实现购物车总价计算就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
Jquery获取radio选中的值
May 05 jQuery
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
JavaScript原型式继承实现方法
Nov 06 #Javascript
vue点击自增和求和的实例代码
Nov 06 #Javascript
解决vue 表格table列求和的问题
Nov 06 #Javascript
JavaScript如何借用构造函数继承
Nov 06 #Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JS input 数字验证代码
2009/07/30 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Python 初始化多维数组代码
2008/09/06 Python
Python科学计算之Pandas详解
2017/01/15 Python
python如何实现反向迭代
2018/03/20 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
建筑设计师岗位职责
2013/11/18 职场文书
车间统计员岗位职责
2014/01/05 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
建筑结构施工求职信
2014/07/11 职场文书
简短清晨问候语
2015/11/10 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server