<script setup>
import { ref } from 'vue'

defineProps({
    shopList: Array
})
let sum_price = 0
let sum_compute = (shopList) => {
    let sum = 0
    for (let i = 0; i < shopList.length; i++) {
        sum += shopList[i].price * shopList[i].count;
    }
    sum_price = sum
}
</script>

<template>
    <div>
        <h3>购物车</h3>
        <ul v-for="(item, index) in shopList" :key="index">
            <p>
                商品名：<span>{{ item.name }}</span>
                <br>
                单价：<span>{{ item.price }}</span>
                <div>
                    数量：<button @click="(item.count - 1) >= 0 ? item.count-- : 0">-</button>
                    <span>{{ item.count }}</span>
                    <button @click="item.count++">+</button>
                </div>
            </p>
        </ul>
        <button @click="sum_compute(shopList)">结算</button>
        {{ sum_price }}
    </div>
</template>

<style scoped></style>

点击结算，这里的 sum_price 不能实时渲染，但console.log()打印出的值是更新了