vue实现购物车功能

最新推荐文章于 2024-05-11 22:07:32 发布

程序员小王java

最新推荐文章于 2024-05-11 22:07:32 发布

阅读量2.3k

点赞数 5

分类专栏： vue的学习之路文章标签： vue.js 前端 javascript

程序员小王

本文链接：https://blog.csdn.net/weixin_44385486/article/details/121962298

版权

vue的学习之路专栏收录该内容

12 篇文章 37 订阅

订阅专栏

vue实现购物车功能

🍅程序员小王的博客：程序员小王的博客
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
🍅 如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕
🍅java自学的学习路线：java自学的学习路线

原理分析和实现

注意想实现该功能，需要学习：Vue学习之路（基础篇），深入的了解每个指令的使用
首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue实现购物车</title>
</head>
<body>

<div id="app">
    <h3>购物车</h3>
    名称：<input style="width:60px" type="text" v-model="nameValue"> <br/>
    单价：<input style="width:60px" type="text" v-model="priceValue"> <br/>
    数量：<input style="width:60px" type="text" v-model="countValue">
    <button @click="add()">添加购物车</button>
    <hr/>
    <table border="1">
        <tr>
            <td>名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
        </tr>

        <tr v-for="(product,index) in products">
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>
                <button @click="desc(index)">-</button>
                {{product.count}}
                <button @click="incr(index)">+</button>
            </td>
            <td>{{product.price*product.count}}</td>
        </tr>

        <tr>
            <td colspan="4">总价：{{total()}}元</td>
        </tr>
    </table>
</div>
</body>
</html>
<script src="js/vue-min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            products: [
                {name: "秋裤", price: "81", count: 2},
                {name: "华为", price: "5810", count: 1},
            ],
            nameValue: "",
            priceValue: "",
            countValue: 0,
            totalPrice:0
        },
        methods: {
            incr(index) {
                this.products[index].count++;
            },
            desc(index) {
                this.products[index].count--;
            },
            add() {
                this.products.push({name: this.nameValue, price: this.priceValue, count: this.countValue});
                this.nameValue = "";
                this.priceValue = "";
                this.countValue = 0;
            },
            total(){

                var price=0;

                for (var i = 0; i <this.products.length; i++) {

                    price+=this.products[i].price * this.products[i].count
                }

                return price.toFixed(2);
            }
        }
    })

</script>