用Vue制作一个简单购物车

最新推荐文章于 2023-12-11 01:36:03 发布

nZk丶

最新推荐文章于 2023-12-11 01:36:03 发布

阅读量957

点赞数 2

分类专栏： JavaScript&Vue 文章标签： Vue JavaScript 前端购物车

本文链接：https://blog.csdn.net/weixin_43729854/article/details/102880622

版权

JavaScript&Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先上一张效果图：

为什么都用Vue开发网页呢？因为它简单便捷。

来给大家看一个Vue框架实现一个简单的购物车，感受一下Vue的便捷。

构造主要还是老生常谈的第三个部分：html,css,Javascript。

Html负责制作网页上显示购物车的表，并完成少部分逻辑（点击+商品数量加一；点击-商品数量减一；点击移除将商品数量置零）

Css负责渲染表的样式

JS负责传入数据并计算总价

上一下代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>ShoppingBag</title>
</head>


<style>
    table {
        border: 1px solid black;
    }
    table {
        width: 100%;
    }

    th {
        height: 50px;
    }
    th, td {
        border-bottom: 1px solid #ddd;
    }
</style>

<body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <table>
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="huawei in Ip_Json">
            <td>{{ huawei.id }}</td>
            <td>{{ huawei.name }}</td>
            <td>{{ huawei.price }}</td>
            <td>
                <button v-bind:disabled="huawei.count === 0" v-on:click="huawei.count-=1">-</button>
                {{ huawei.count }}
                <button v-on:click="huawei.count+=1">+</button>
            </td>
            <td>
                <button v-on:click="huawei.count=0">移除</button>
            </td>
        </tr>
    </table>
    总价：${{totalPrice()}}
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            Ip_Json: [{
                id: 1,
                name: 'huawei 10',
                price: 2600,
                count: 1
            },
                {
                    id: 2,
                    name: 'huawei P10',
                    price: 3999,
                    count: 1
                },
                {
                    id: 3,
                    name: 'huawei 12',
                    price: 4777,
                    count: 1
                }]

        },
        methods:{
            totalPrice : function(){
                var totalP = 0;
                for (var i = 0,len = this.Ip_Json.length;i<len;i++) {
                    totalP+=this.Ip_Json[i].price*this.Ip_Json[i].count;
                }
                return totalP;
            }

        }
    })
</script>

</body>
</html>

nZk丶

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
用Vue制作一个简单购物车

先上一张效果图：为什么都用Vue开发网页呢？因为它简单便捷。来给大家看一个Vue框架实现一个简单的购物车，感受一下Vue的便捷。构造主要还是老生常谈的第三个部分：html,css,Javascript。Html负责制作网页上显示购物车的表，并完成少部分逻辑（点击+商品数量加一；点击-商品数量减一；点击移除将商品数量置零）Css负责渲染表的样式JS负责传...
复制链接

扫一扫