vue實現(xiàn)簡單計算商品價格

更新時間：2020年09月14日 08:40:24 作者：weixin_45803990

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單計算商品價格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單計算商品價格的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  table {
   width: 700px;
   text-align: center;
  }

  tr,
  th {
   height: 40px;
  }
 </style>
 <script src="../vue.js"></script>
</head>

<body>
 <div class="box">
  <table cellspacing='0' border="solid 1px">
   <thead>
    <tr>
     <th>全選<input type="checkbox" v-model='isAllChecked'></th>
     <th>id</th>
     <th>商品名稱</th>
     <th>商品價格</th>
     <th>商品數(shù)量</th>
     <th>小計價格</th>
    </tr>
   </thead>
   <tbody>
    <tr v-for='item in goods'>
     <td><input type="checkbox" v-model='item.isCheck'></td>
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
     <td>{{item.price}}</td>
     <td>{{item.num}}</td>

     <!-- 計算每個商品的價格根據(jù)選中的狀態(tài) -->
     <td>{{goodsPrice(item)}}元</td>
    </tr>
    <tr>
     <td colspan="6">商品總價:{{total}}元</td>
    </tr>
   </tbody>
  </table>
 </div>

 <script>
  var vm = new Vue({
   el: '.box',
   methods: {

    // 商品小計
    goodsPrice(item) {
     var sum = 0;
     // 選中就計算價格
     if (item.isCheck) {
      sum = item.price * item.num;
     }
     return sum;
    }

   },
   data: {
    goods: [
     {
      id: 20200925,
      name: '蘋果',
      price: 3,
      num: 12,
      isCheck: false,
     },
     {
      id: 20200945,
      name: '香蕉',
      price: 2,
      num: 33,
      isCheck: false,
     },
     {
      id: 20200935,
      name: '橘子',
      price: 4,
      num: 44,
      isCheck: false,
     },
    ]
   },
   computed: {

    isAllChecked: {
     /* 
      this.goods.every(el=>el.isCheck)返回結果為true 或者false

     遍歷下方每一個isCheck的狀態(tài)、
      1、 都選中返回true---------即全選為true,
      2、 有一個沒選中返回false---即全選為false
     */
     get() {
      return this.goods.every(el => el.isCheck)
     },
     set(val) {
      // 全選的狀態(tài)true、false兩種狀態(tài)
      console.log(val);

      // val為true即全選的時候、下方每一個isCheck也是true
      // val為false即全選的時候、下方每一個isCheck也是false
      return this.goods.forEach(el => el.isCheck = val);
     }
    },


    // 根據(jù)選中狀態(tài)計算商品的價格
    total() {
     var sum = 0;
     this.goods.forEach(el => {
      if (el.isCheck) {
       sum += el.price * el.num;
      }
     })
     return sum;

    },

   }
  })
 </script>

</body>

</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: