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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
leaflet的开发入门教程
Nov 17 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
Vue实现购物车功能
Apr 27 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python实现手势识别
2020/10/21 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
防灾减灾活动总结
2014/08/30 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python