首页
所有分类
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基本语法分析说明
Jun 15 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
原生js轮播（仿慕课网）
Feb 15 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
Android面试题(6) 马耳他购物网站(1) JAVA面试题(401) 哈萨克斯坦购物网站(2) C++面试题(199) 冰岛购物网站(1) PHP面试题(54) 保加利亚购物网站(3) 约旦购物网站(1) 白俄罗斯购物网站(3)
You might like
PHP出错界面
2006/10/09 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php中adodbzip类实例
2014/12/08 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python操作redis的方法
2015/07/07 Python
python实战教程之自动扫雷
2018/07/13 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
如何利用python 读取配置文件
2021/01/06 Python
购买大码女装：Lane Bryant
2016/09/07 全球购物
TUMI马来西亚官方网站：国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
高一学生评语大全
2014/04/25 职场文书
秋天的图画教学反思
2014/05/01 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
委托证明范本
2014/11/25 职场文书
老人节主持词
2015/07/04 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书