Vue入门练习_简易购物车

最新推荐文章于 2024-06-14 11:01:38 发布

CchiozH.

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量85

点赞数

文章标签： vue html5 css3 javascript

本文链接：https://blog.csdn.net/m0_52602525/article/details/115602519

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易购物车</title>
    <style>
        [v-cloak] {
            display: none;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
        }

        tr,
        th,
        td {
            border: 1px solid black;
            padding: 10px 20px;
        }

        input {
            outline: none;
            text-align: center;
            width: 64px;
            height: 24px;
            margin: 0 6px;
        }

        button {
            padding: 2px 4px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <table>
            <thead>
                <tr>
                    <th>品牌</th>
                    <th>价格￥</th>
                    <th>数量</th>
                    <th style="width: 60px;">小计￥</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(item,index) in items'>
                    <td>{{item.brand}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click='item.count--' :disabled="item.count == 1">－</button>
                        <input type="text" :value="item.count" v-model="item.count">
                        <button @click='item.count++'>＋</button>
                    </td>
                    <td>{{item.price*item.count}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align: right;">总价￥</td>
                    <td colspan="2">{{totalPrice}}</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    { brand: 'HUAWEI', price: 5199, count: 1 },
                    { brand: 'XIAOMI', price: 3799, count: 1 },
                    { brand: 'OPPO', price: 3499, count: 1 },
                    { brand: 'vivo', price: 3699, count: 1 },
                    { brand: 'Apple', price: 4888, count: 1 },
                ]
            },
            computed: {
                //计算总价
                totalPrice() {
                    let total = 0;
                    this.items.map(item => {
                        total += item.price * item.count
                    });
                    return total;
                }
            },
            methods: {
                //删除商品
                del(index) {
                    this.items.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>

页面效果图：
在这里插入图片描述

CchiozH.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门练习_简易购物车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简易
复制链接

扫一扫