基于Vue3、Vite、TS ----购物车案例
基于Ts、vite的vue3购物车案例
本文实现效果如下:
请读者尝试自己实现!
实现代码如下(涉及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>