首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现商品加减计算总价的实例代码

Posted in Javascript onAugust 12, 2018

需求是商品只能选一次,有原价和现价.

大概的效果图是这样:

vue实现商品加减计算总价的实例代码

完整代码在这里,直接复制就能用:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  html{
   background: rgb(214,175,209);
  }
 /*计算器*/
  #app{
   text-align: center;
   margin-top: 8%;
   position: relative;
  }
  .goods_box{
   width: 70vw;
   margin-left:15vw;
   height: auto;
   margin-top: 5%;
  }
  .goods_box ul{
   width: 100%;
   overflow:auto;
  }
  .goods_box ul li{
   float: left;
   width: 23%;
   height: auto;
   cursor: pointer;
   margin: 2% 1%;
   font-size: 0.6rem;
   background: #fff;
   display: flex;
   align-items: center;
   align-content: center;
   padding-bottom: 1%;
   border-radius: 4px;
  }
  .goods_img{
   width: 40%;
   border-radius: 6px;
   height: auto;
   margin-left: -4%;
   margin-top: -4%;
   box-shadow: 3px 3px 2px rgba(0,0,0,.24);
  }
  .price{
   margin-left: 6%;
   text-align: left;
  }
  .or_price{
   color: rgba(242,58,58,0.8);
   text-decoration: line-through;
  }
  .goods_name{
   margin-top: 4%;
  }
  .now_and_or{
   margin-top: 5%;
  }
  .now_price{
   font-size: 1rem;
  }
  /*计算结果的盒子*/
  .count_box{
   width: 70vw;
   margin-left:15vw;
   height: auto;
   border: 2px dashed rgb(253,234,93);
   display: flex;
   align-items: center;
   padding: 2%;
   position: relative;
  }
  .count_box .goods_img{
   width: 100px;
   height: 100px;
   margin:0;
   box-shadow: none;
  }
  .count_box ul{
   width: 100%;
   overflow:auto;
  }
  .count_box ul li{
   float: left;
   cursor: pointer;
   font-size: 0.6rem;
   display: flex;
   align-items: center;
   align-content: center;
   padding-top: 2%;
   padding-bottom: 1%;
   border-radius: 4px;
  }
  .count_box ul li .price{
   text-align: center;
  }
  .img_box{
   position: relative;
  }
  .add{
   font-size: 2rem;
   color:rgb(253,234,93);
   margin-left: 20px;
  }
  .delete{
   display: flex;
   align-items: center;
   color:rgb(253,234,93);
   font-size: 34px;
   position: absolute;
   top: -25%;
   right: -9%;
   cursor: pointer;
   z-index: 1;
  }
  /*计算结果*/
  .result{
   margin-top: 16%;
   margin-left: -30px;
   font-size: 1rem;
   display: flex;
   align-items: center;
   text-align: left;
   background: rgb(214,175,209);
  }
  .result_content{
   display: block;
   margin-left: 2rem;
  }
  .or_amount{
   text-decoration: line-through;
   line-height: 2rem;
  }
  .equal_to{
   font-size: 2rem;
   color:rgb(253,234,93);
  }
  .now_amount span{
   color:rgb(253,234,93);
  }
  .img01{
   position: absolute;
  }
  .buy{
   position: absolute;
   right: 12px;
   bottom: 10px;
   font-size: 0.75rem;
  }
 </style>
</head>
<body>
 <!-- 商品计算器 -->
 <div id="app">
  <div class="goods_box">
   <ul>
   <li class="goods" v-for="(item, index) in list" @click="choose(index)">
    <img class="goods_img" v-bind:src="item.goods_img">
    <div class="price">
     <div class="goods_name">
      {{item.name}}
     </div>
     <div class="now_and_or">
      <div class="now">现价：<span class="now_price">{{item.hide_price}}￥</span></div>
      <div class="or">原价：<span class="or_price">{{item.or_price}}￥</span></div>
     </div>
    </div>
   </li>
   </ul>
  </div>
  <div class="count_box">
   <ul>
    <li v-for="(item, index) in count_list" @click="deleteGoods(index)">
     <div class="count_box_item">
      <div class="img_box">
      <div class="delete">×</div>
      <img class="goods_img" v-bind:src="item.goods_img">
      </div>
     </div>
     <div class="add">+</div>
    </li>
    <li>
     <div class="result">
      <div class="equal_to">=</div>
      <div class="result_content">
       <div class="or_amount">原价：{{or_amount}}￥</div>
       <div class="now_amount">现价：<span>{{now_amount}}￥</span></div>
      </div>
     </div>
    </li>
   </ul>
   <a class="buy" href="#" rel="external nofollow" >立即购买</a>
  </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 <script type="text/javascript">
  var idsArray = [];
  var or_priceArray = [];
  var now_priceArray = [];
  //数组去重
  function removeDuplicatedItem(arr) {
   for(var i = 0; i < arr.length-1; i++){
    for(var j = i+1; j < arr.length; j++){
     if(arr[i]==arr[j]){
      arr.splice(j,1);
      j--;
     }
    }
   }
   return arr;
  }
  var app = new Vue({
   el:"#app",
   data:{
    // 商品列表
    list:[
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"100",
      now_price:"10",
      //显示的价格
      hide_price:"50",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"200",
      now_price:"20",
      hide_price:"？",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"300",
      now_price:"30",
      hide_price:"50",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"100",
      now_price:"10",
      hide_price:"50",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"200",
      now_price:"20",
      hide_price:"？",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"300",
      now_price:"30",
      hide_price:"50",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"100",
      now_price:"10",
      hide_price:"50",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"200",
      now_price:"20",
      hide_price:"50",
      name:"很长很长的名字"
     },
     {
      goods_img:"http://cdn.w7.cc/images/2018/05/19/mdqzEyVEeqBdK3xKulqskX9ryMMfTbgbU1jMOE7i.jpeg?imageView2/5/w/88/format/png",
      or_price:"300",
      now_price:"30",
      hide_price:"50",
      name:"很长很长的名字"
     }
    ],
    //动态选择列表
    count_list:[],
    //原总价
    or_amount:0,
    //现总价
    now_amount:0
   },
   methods:{
    choose: function(index){
     var arr = this.list;
     var that = this;
     //清空数组
     this.count_list = [];
     this.or_amount = 0;
     this.now_amount = 0;
     or_priceArray = [];
     now_priceArray = [];
     idsArray.push(index);
     //数组去重
     removeDuplicatedItem(idsArray);
     //循环打印选中商品
     for( var i=0;i<idsArray.length;i++){
      that.count_list.push(arr[idsArray[i]]);
      or_priceArray.push(parseInt(arr[idsArray[i]].or_price));
      now_priceArray.push(parseInt(arr[idsArray[i]].now_price));
     }
     //循环计算价格
     for(var i=0;i<or_priceArray.length;i++){
      this.or_amount += or_priceArray[i];
      this.now_amount += now_priceArray[i];
     }
    },
    //删除商品
    deleteGoods: function(index){
     this.or_amount = 0;
     this.now_amount = 0;
     this.count_list.splice(index,1);
     idsArray.splice(index,1);
     or_priceArray.splice(index,1);
     now_priceArray.splice(index,1);
     //循环计算价格
     for(var i=0;i<or_priceArray.length;i++){
      this.or_amount += or_priceArray[i];
      this.now_amount += now_priceArray[i];
     }
    }
   }
  })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的vue实现商品加减计算总价，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue实现商品加减计算总价的实例代码

- Author -

here962464

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
javascript之bind使用介绍
Oct 09 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
javascript三种代码注释方法
Jun 02 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 #Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 #Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 #Javascript
axios向后台传递数组作为参数的方法
Aug 11 #Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 #Javascript
字段分割(1) Simhash(1) RecyclerView(1) 控制流(1) queue(1) REGEXP(1) Hadoop(1) 内存池(1) 九宫格(5) TaiShan(1)
You might like
用Php实现链结人气统计
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php压缩文件夹最新版
2018/07/18 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
JavaScript运动框架 解决速度正负取整问题（一）
2017/05/17 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛（DAC） 静候2018新征程开启
2018/03/11 DOTA
python 垃圾收集机制的实例详解
2017/08/20 Python
《Python学习手册》学习总结
2018/01/17 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
绘儿乐产品官方在线商店：Crayola.com
2019/09/07 全球购物
美国专业消费电子及摄影器材网站：B&H Photo Video
2019/12/18 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
初中作文评语
2014/12/25 职场文书
求职推荐信范文
2015/03/27 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
励志语录：时光飞逝，请学会珍惜所有的人和事
2020/01/16 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python学习之时间包使用教程详解
2022/03/21 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js