欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼

 更新時(shí)間:2018年08月12日 11:15:14   作者:here962464  
這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

需求是商品只能選一次,有原價(jià)和現(xiàn)價(jià).

大概的效果圖是這樣:

這里寫圖片描述

完整代碼在這里,直接復(fù)制就能用:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  html{
   background: rgb(214,175,209);
  }
 /*計(jì)算器*/
  #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;
  }
  /*計(jì)算結(jié)果的盒子*/
  .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;
  }
  /*計(jì)算結(jié)果*/
  .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>
 <!-- 商品計(jì)算器 -->
 <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">現(xiàn)價(jià):<span class="now_price">{{item.hide_price}}¥</span></div>
      <div class="or">原價(jià):<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">原價(jià):{{or_amount}}¥</div>
       <div class="now_amount">現(xiàn)價(jià):<span>{{now_amount}}¥</span></div>
      </div>
     </div>
    </li>
   </ul>
   <a class="buy" href="#" rel="external nofollow" >立即購(gòu)買</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 = [];
  //數(shù)組去重
  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",
      //顯示的價(jià)格
      hide_price:"50",
      name:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     },
     {
      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:"很長(zhǎng)很長(zhǎng)的名字"
     }
    ],
    //動(dòng)態(tài)選擇列表
    count_list:[],
    //原總價(jià)
    or_amount:0,
    //現(xiàn)總價(jià)
    now_amount:0
   },
   methods:{
    choose: function(index){
     var arr = this.list;
     var that = this;
     //清空數(shù)組
     this.count_list = [];
     this.or_amount = 0;
     this.now_amount = 0;
     or_priceArray = [];
     now_priceArray = [];
     idsArray.push(index);
     //數(shù)組去重
     removeDuplicatedItem(idsArray);
     //循環(huán)打印選中商品
     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));
     }
     //循環(huán)計(jì)算價(jià)格
     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);
     //循環(huán)計(jì)算價(jià)格
     for(var i=0;i<or_priceArray.length;i++){
      this.or_amount += or_priceArray[i];
      this.now_amount += now_priceArray[i];
     }
    }
   }
  })
 </script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)商品加減計(jì)算總價(jià),希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!

相關(guān)文章

  • vue父子組件通信的高級(jí)用法示例

    vue父子組件通信的高級(jí)用法示例

    這篇文章主要給大家介紹了關(guān)于vue父子組件通信的高級(jí)用法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)

    vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)

    這篇文章主要介紹了vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)的相關(guān)資料,需要的朋友可以參考下
    2019-04-04
  • vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決

    vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決

    這篇文章主要介紹了vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無法加載頁面的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 帶你了解前端的幾種包管理器(npm/pnpm等)

    帶你了解前端的幾種包管理器(npm/pnpm等)

    隨著前端工程化的應(yīng)用越來越廣,插件和包的管理也逐漸衍生出很多的管理器,常見的幾種包管理器如:npm、cnpm、yarn、pnpm,那你知道這些管理器之間有哪些區(qū)別嗎?我們一起來逐個(gè)認(rèn)識(shí)下它們
    2023-04-04
  • vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能

    vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能

    如何在我們切換tab標(biāo)簽的時(shí)候,緩存標(biāo)簽最后操作的內(nèi)容,簡(jiǎn)單來說就是每個(gè)標(biāo)簽頁中設(shè)置的比如搜索條件及結(jié)果、分頁、新增、編輯等數(shù)據(jù)在切換回來的時(shí)候還能保持原樣,這篇文章介紹vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能,感興趣的朋友一起看看吧
    2023-04-04
  • 詳解Vue3中ref和reactive函數(shù)的使用

    詳解Vue3中ref和reactive函數(shù)的使用

    這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下
    2022-07-07
  • VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class)

    VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class)

    這篇文章主要介紹了VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • element-ui重置resetFields()不生效的解決

    element-ui重置resetFields()不生效的解決

    本文主要介紹了element-ui重置resetFields()不生效的解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-12-12
  • 淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解

    淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解

    這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細(xì)的介紹一下
    2018-11-11
  • vue3.0如何在全局掛載對(duì)象和方法

    vue3.0如何在全局掛載對(duì)象和方法

    這篇文章主要介紹了vue3.0如何在全局掛載對(duì)象和方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論