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 相关文章推荐
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
js实现简单计算器
Nov 22 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
Swiper.js实现移动端元素左右滑动
Sep 08 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
PHP与javascript的两种交互方式
2006/10/09 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python中Unittest框架的具体使用
2019/08/27 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
小学新教师培训方案
2014/02/03 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
python模板入门教程之flask Jinja
2022/04/11 Python