小小购物车案例（V3）

效果如下：

可以添加和减少商品个数（最少个为1），在添加的时候总价格会随着改变，也可以点击按钮移除商品

代码分为三个模块（html、js、css）

html部分：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍购物车</title>
    <link href="./index.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <div id="app"></div>
 
    <template id="my-app">
        <template v-if="books.length > 0">
            <table>
                <thead>
                    <th>序号</th>
                    <th>书集名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(book,index) in books" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.publicationDate}}</td>
                        <td>{{formatPrice(book.price)}}</td>
                        <td>
                            <button :disabled="book.count<=1" @click="decrement(index)">-</button>
                            <span class="count">{{book.count}}</span>
                            <button @click="increment(index)">+</button>
                        </td>
                        <td>
                            <button @click="removeBook(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
 
            </table>
            <h2>总价格：{{formatPrice(totalPrice)}}</h2>
        </template>
        <template v-else>
            <div class="empty">购物车为空</div>
        </template>
    </template>
 
    <script src="../js/vue3.js"></script>
    <script src="./index.js"></script>
</body>
 
</html>

js部分：


const App = {
    template: '#my-app',
    data() {
        return {
            books: [
                {
                    id: 1,
                    name: '乱世佳人',
                    publicationDate: '2007-09-02',
                    price: '42',
                    count: 1,
                },
                {
                    id: 2,
                    name: '幸福来敲门',
                    publicationDate: '2007-09-02',
                    price: '54',
                    count: 1,
                },
                {
                    id: 3,
                    name: '弱点',
                    publicationDate: '2007-09-02',
                    price: '65',
                    count: 1,
                },
                {
                    id: 4,
                    name: '楚门的世界',
                    publicationDate: '2007-09-02',
                    price: '43',
                    count: 1,
                }
            ]
 
        }
    },
    computed: {
        totalPrice() {
            let finalPrice = 0;
            for (let book of this.books) {
                finalPrice += book.count * book.price;
            }
            return finalPrice
        }
    },
    methods: {
        // 点击加
        increment(index) {
            this.books[index].count++;
        },
        // 点击减
        decrement(index) {
            this.books[index].count--;
 
        },
        // 点击移除
        removeBook(index) {
            this.books.splice(index, 1)
        },
        // 在价格前面加上￥符号
        formatPrice(price) {
            return "¥" + price
        }
    },
}
 
Vue.createApp(App).mount('#app')

css部分：


table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
}
th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}
.count{
    margin: 0 5px;
}
.empty{
    margin-left: 80px;
    margin-top: 50px;
    font-size: 30px;
}

相关阅读:
SpringBoot请求参数与响应返回值,ResponseEntity＜T＞自定义响应
 【附源码】Python计算机毕业设计宁夏源沣医药线上销售平台
 网络规划设计师之OSI七层模型之应用层
 【Web漏洞探索】跨站脚本漏洞
 3D漫游：所见即所得的形式，构建线上数字展厅
 动手学习深度学习 06：卷积神经网络
 IIS 日志解析，增强 IIS 服务器安全性
 【毕业设计】基于javaEE+SSH+SqlServer的企业车辆管理系统设计与实现（毕业论文+程序源码）——车辆管理系统
 Azure Synapse Analytics 性能优化指南（3）——使用具体化视图优化性能(下)
建模杂谈系列175 论交付与共赢
原文地址：https://blog.csdn.net/weixin_45096939/article/details/133175547