首页
所有分类
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 相关文章推荐
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
小程序实现搜索框功能
Mar 26 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
vue 实现锚点功能操作
Aug 10 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
PR-D3L(1) ICF-F10(1) CPU(2) 德生G88(1) 纸巾盒(1) 德生1994(1) SRF-40W(1) 天梯图(1) ICF-SW100(1) AE3805(1)
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
AngularJS语法详解
2015/01/23 Javascript
JavaScript插件化开发教程（五）
2015/02/01 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
jquery validate demo 基础
2015/10/29 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
Bootstrap3 图片（响应式图片&amp;图片形状）
2017/01/04 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python实现的读写json文件功能示例
2018/06/05 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python复合条件下的字典排序
2020/12/18 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
Shopee越南：东南亚与台湾电商平台
2019/02/03 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
调解员先进事迹材料
2014/02/07 职场文书
愚人节活动策划方案
2014/03/11 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2014员工聘用协议书（最新版）
2014/11/24 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书