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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
javascript基本类型详解
Nov 28 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
学习Angularjs分页指令
Jul 01 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 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代码
2012/07/14 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
浅谈JavaScript中promise的使用
2017/01/11 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
学雷锋宣传标语
2014/06/25 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
教你nginx跳转配置的四种方式
2022/07/07 Servers