基于Vue3、Vite、TS ----computed购物车案例

基于Ts、vite的vue3computed购物车案例

本文实现效果如下：

请读者尝试自己实现！

实现代码如下(涉及reduce的使用)

<template>
  <table border style='width:800px'>
    <thead>
      <tr>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>总价</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody align="center">
      <tr :key='index' v-for='(item, index) in Data'>
        <td>{{ item.name }}</td>
        <td>
          <button @click="addAndSub(item, false)">-</button>{{ item.num }}
          <button @click="addAndSub(item, true)">+</button>
        </td>
        <td>{{ item.price }}</td>
        <td>{{item.num * item.price}}</td>
        <td><button @click="del(index)">删除</button></td>
      </tr>
    </tbody>
    <tfoot>
      <td></td>
      <td></td>
      <td></td>
      <td align="center">合计：{{ totalprice }}</td>
      <td align="center"><button @click='delall'>清空</button></td>
    </tfoot>
  </table>
</template>

<script setup lang="ts">
import { reactive, computed ,ref} from 'vue';
let totalprice = ref(0)
type Shop = {
  name: string,
  num: number,
  price: number,
}
const Data = reactive<Shop[]>([
  {
    name: '衬衫',
    num: 2,
    price: 120
  },
  {
    name: '裤子',
    num: 3,
    price: 150
  },
  {
    name: '袜子',
    num: 5,
    price: 24
  }
]);

const addAndSub = (item: Shop, type: boolean): void => {
  if (item.num >= 1 && type == false) {
    item.num--
  }
  else if (item.num <= 99 && type == true) {
    item.num++
  }
}

totalprice = computed<number>(()=>{
  return Data.reduce((prev,next)=>{
    return prev + (next.num *next.price)
  },0)
})




const del = (index: number) => {
  Data.splice(index, 1)
}

const delall = () => {
  Data.splice(0, Data.length)

}
</script>
<style>
</style>