在项目中写一个购物车功能

<template>

  <div class="two">

    <div v-for="item in taskPriceList" :key="item.id">

      <input type="radio" value="selectInput" v-model="item.selectF" />

      <p>￥{{item.price}}元</p>

      <div>

        <button @click="delBtn(item.id)">-</button>

        <span class="span">{{item.count}}</span>

        <button @click="addBtn(item.id)">+</button>

      </div>

    </div>

    <p>总共合计：{{totalPrice}}元</p>

  </div>

</template>

<script>

export default {

  name: "ShengMingZQTwo",

  data() {

    return {

      taskPriceList: [

        { id: 1, selectF: "", count: 1, price: 138 },

        { id: 2, selectF: "", count: 2, price: 30 },

        { id: 3, selectF: "", count: 1, price: 450 }

      ]

    };

  },

  computed: {

    totalPrice() {

      let sum = 0;

      this.taskPriceList.forEach(item => {

        if (item.selectF == "selectInput") {

          sum += item.price * item.count;

        }

      });

      return sum;

    }

  },

  methods: {

    addBtn(value) {

      this.taskPriceList.forEach(item => {

        if (value == item.id) {

          item.count++;

          item.selectF = "selectInput";

        }

      });

    },

    delBtn(value) {

      this.taskPriceList.forEach(item => {

        if (value == item.id && item.count > 1) {

          item.count--;

          if (item.count == 1) {

            item.selectF = "";

          }

        }

      });

    }

  }

};

</script>

<style scoped>

.span {

  display: inline-block;

  margin: 0 18px;

}

</style>