<template>
<div>
<table border style="width:800px">
<thead>
<tr>
<th>名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="index">
<td align="center">
{{ item.name }}
</td>
<td align="center">
<button @click="addAndSub(item,true)">+</button>
{{ item.number }}
<button @click="addAndSub(item,false)">-</button>
</td>
<td align="center">
{{ item.price }}
</td>
<td align="center">
<el-button type="danger" @click="deleteRow(index)">删除</el-button>
</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td></td>
<td>总价:{{ total }}</td>
</tfoot>
</table>
</div>
</template>
<script setup lang="ts">
import {computed, reactive, ref} from 'vue';
type Shop = {
name: string;
number: number;
price: number;
};
const data = reactive<Shop[]>([
{
name: '苹果',
number: 10,
price: 5.5,
},
{
name: '香蕉',
number: 20,
price: 2.5,
},
{
name: '橘子',
number: 30,
price: 3.5,
},
{
name: '西瓜',
number: 40,
price: 4.5,
},
{
name: '草莓',
number: 50,
price: 6.5,
},
{
name: '葡萄',
number: 60,
price: 7.5,
},
{
name: '梨',
number: 70,
price: 8.5,
},
{
name: '樱桃',
number: 80,
price: 9.5,
},
{
name: '橙子',
number: 90,
price: 10.5,
},
{
name: '柠檬',
number: 100,
price: 11.5,
},
{
name: '芒果',
number: 110,
price: 12.5,
},
{
name: '火龙果',
number: 120,
price: 13.5,
},
{
name: '榴莲',
number: 130,
price: 14.5,
},
{
name: '荔枝',
number: 140,
price: 15.5,
},
{
name: '桃子',
number: 150,
price: 16.5,
},
{
name: '李子',
number: 160,
price: 17.5,
},
{
name: '椰子',
number: 170,
price: 18.5,
},
{
name: '樱桃',
number: 180,
price: 19.5,
},
{
name: '橙子',
number: 190,
price: 20.5,
},
{
name: '柠檬',
number: 200,
price: 21.5,
},
{
name: '芒果',
number: 210,
price: 22.5,
},
{
name: '火龙果',
number: 220,
price: 23.5,
},
{
name: '榴莲',
number: 230,
price: 24.5,
},
{
name: '荔枝',
number: 240,
price: 25.3,
},
]);
const addAndSub = (item: Shop, isAdd: boolean) => {
if (isAdd) {
item.number++;
} else {
if (item.number > 0) {
item.number--;
}
}
};
const total = computed(() => {
return data.reduce((pre, cur) => {
return pre + cur.number * cur.price;
}, 0);
});
const deleteRow = (index: number) => {
data.splice(index, 1);
};
</script>
vue3 利用computer 自动计算属性写一个简易购物车小程序
于 2023-01-10 01:11:25 首次发布