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 简单抽屉效果的实现代码
Mar 09 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
typescript配置alias的详细步骤
Aug 12 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
php 安全过滤函数代码
2011/05/07 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
硕士生找工作求职信
2014/07/05 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
文体活动总结
2015/02/04 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
推普标语口号大全
2015/12/26 职场文书