vue根據(jù)選擇的折扣，計算折扣之后的數(shù)據(jù)問題

訂單生成訂單總額，根據(jù)選擇的折扣水平，計算出訂單的折扣之后的價格

 <div class="total">
      <span>總共  {{totalCount}}  道</span>
      <span>合計: ￥  {{totalPrice}}</span>
      折扣：
      <span v-for="item in discountResult" :key="item.name" @click = 'delDiscount(index)'>{{item.name}} </span>
      <!--   <span>折扣：{{discount}}</span> -->
      折扣金額<span>{{afterDiscount}}</span>
      <p>添加折扣</p>
      <p><span v-for="item in discount" :key="item.id" @click="addDiscount(item)"> {{item.name}}</span></p>

    </div>

 data() {
      return {
        goods: [],
        isSelected:0,
        cartList:[],
        name:'food',
        styles:'food',
        show:true,
        activeIndex:null,
        discount: [{
          id: 1,
          name: 0.9
        }, {
          id: 2,
          name: 0.8
        }, {
          id: 3,
          name: 0.7
        }, {
          id: 4,
          name: 0.6
        }, {
          id: 5,
          name: 0.5
        }, {
          id: 6,
          name: 0.4
        }],
        discountResult: [],
        note: [{
          id: 1,
          name: "清淡"
        }, {
          id: 2,
          name: "半糖"
        }, {
          id: 3,
          name: "多放鹽"
        }, {
          id: 4,
          name: "少辣"
        }, {
          id: 5,
          name: "多辣"
        }],
        noteResult: []

      }
    },
    
    
     afterDiscount() {
      let discountPrice = 0
      this.discountResult.forEach((item) => {
        discountPrice = item.name * totalPrice
      })
      return discountPrice
    },

回答

編輯回答

乞許

我寫了一個demo，在你那上面精簡了不少，思路就是這樣，你運行看看效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example</title>
</head>
<body>
    <div id="app">
        <div class="total">
            <span>總共  {{totalCount}}  道</span>
            <span>合計: ￥  {{totalPrice}}</span>
            <p>選擇的折扣：<span>{{selectDiscount}}</span></p>
            折后金額：<span>{{afterDiscount}}</span>
            <p>選擇折扣：</p><span v-for="item in discount" :key="item.id" @click="addDiscount(item)" style="cursor:pointer;"> {{item.name}}</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                totalCount: 5,
                totalPrice: 155.24,
                selectDiscount: null,
                discount: [{
                    id: 1,
                    name: 0.9
                }, {
                    id: 2,
                    name: 0.8
                }, {
                    id: 3,
                    name: 0.7
                }, {
                    id: 4,
                    name: 0.6
                }, {
                    id: 5,
                    name: 0.5
                }, {
                    id: 6,
                    name: 0.4
                }]
            },
            computed: {
                afterDiscount() {
                    return (this.totalPrice * this.selectDiscount).toFixed(2);
                }
            },
            methods: {
                addDiscount(item) {
                    return this.selectDiscount = item.name;
                }
            }
        })
    </script>
</body>
</html>

2017年5月12日 01:21