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实现商品加减计算总价,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
JS控制表单提交的方法
Jul 09 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
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
You might like
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP图片水印类的封装
2017/07/06 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
Js基础学习资料
2010/11/23 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
js闭包实例汇总
2014/11/09 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
促销活动计划书
2014/05/02 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
婚育证明样本
2015/06/16 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
python异常中else的实例用法
2021/06/15 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis