<template>
<h1>{{ msg }}</h1>
<table>
<thead>
<td>序号</td>
<td>书籍名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</thead>
<tr v-for="(item, index) in dataSource" :key="index">
<td>{{ index }}</td>
<td>{{ }}</td>
<td>{{ }}</td>
<td>￥{{ }}</td>
<td>
<button @click="decrement(index)">-</button>
{{ }}
<button @click="crement(index)">+</button>
</td>
<td><button @click="removeData(index)">移除</button></td>
</tr>
</table>
<h1>总价格：{{ amountPrice }}</h1>
</template>
<script setup lang="ts">
import { reactive, Ref, ref } from 'vue'
defineProps<{ msg: string }>()
let amountPrice: Ref<number>
let dataSource = reactive([
{
bookName: '算法',
createTime: '2006-9',
num: 1,
price: 85,
},
{
bookName: '艺术',
createTime: '2006-2',
num: 1,
price: 85,
},
{
bookName: '大全',
createTime: '2008-10',
num: 1,
price: 85,
},
{
bookName: '代码',
createTime: '2006-3',
num: 1,
price: 85,
},
])
function getAmountPrice() {
amountPrice = ref(0)
for (let i = 0; i < dataSource.length; i++) {
amountPrice.value += dataSource[i].num * dataSource[i].price
}
}
function removeData(val: number) {
dataSource.splice(val, 1)
getAmountPrice()
}
function decrement(index: number) {
if (dataSource[index].num !== 1) {
dataSource[index].num--
getAmountPrice()
} else {
alert('不能再减少了，只有一本了')
}
}
function crement(index: number) {
dataSource[index].num++
getAmountPrice()
}
getAmountPrice()
</script>
<style lang="less" scoped>
table {
width: 800px;
border-bottom: 1px solid rgb(196, 194, 194);
border-right: 1px solid rgb(196, 194, 194);
text-align: center;
thead {
background-color: rgb(234, 232, 232);
}
td {
height: 50px;
border-top: 1px solid rgb(196, 194, 194);
border-left: 1px solid rgb(196, 194, 194);
}
}
</style>