<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue';
interface Data {
name: string,
num: number,
price: number
}
// import HelloWorld from './components/HelloWorld.vue'
let data = reactive<Data[]>([{
name: '帽子',
num: 5,
price: 10
}, {
name: '衣服',
num: 5,
price: 10
}, {
name: '裤子',
num: 5,
price: 10
}, {
name: '鞋子',
num: 5,
price: 10
}])
// let total = computed(() => {
// return data.reduce((pre: number, next: Data) => {
// return pre + next.num * next.price
// }, 0)
// })
let keyWord = ref<string>("")
const del = (index: number) => {
data.splice(index, 1)
}
// const ser = computed(() => {
// return data.filter((item: Data) => { return item.name.includes(keyWord.value) })
// })
let total = ref<number>(0)
let ser = reactive<Data[]>([{ name: '', num: 0, price: 0 }])
watch([data, keyWord], () => {
total.value = data.reduce((pre: number, next: Data) => {
return pre + next.num * next.price
}, 0)
ser = data.filter((item: Data) => { return item.name.includes(keyWord.value) })
}, {
immediate: true
})
// watch(total, () => {
// data.reduce((pre: number, next: Data) => {
// return pre + next.num * next.price
// }, 0)
// })
</script>
<template>
<!-- <div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div> -->
<!-- <HelloWorld msg="Vite + Vue" /> -->
<div><input type="text" v-model="keyWord" placeholder="搜索"></div>
<div>
<table border cellspacing="0" cellpadding="0">
<thead>
<th>
名称
</th>
<th>
数量
</th>
<th>
单价
</th>
<th>
总价
</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item, index) in ser" :key="index">
<td>{{ item.name }}</td>
<td><button @click="item.num > 0 ? item.num-- : null">-</button>{{ item.num }}<button
@click="item.num < 9999 ? item.num++ : null">+</button></td>
<td>{{ item.price }}</td>
<td>{{ item.price * item.num }}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
<tr>
<td>总价</td>
<td colspan="4">{{ total }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style scoped>
* {
padding: 0;
margin: 0;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
自用