vue实现购物车功能

Posted 小王java

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现购物车功能相关的知识,希望对你有一定的参考价值。

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>

以上是关于vue实现购物车功能的主要内容,如果未能解决你的问题,请参考以下文章

vue.js实现图书购物商城

vue.js实现图书购物商城

vue.js实现图书购物商城

vue.js实现图书购物商城

vue.js实战——购物车练习(包含全选功能)

VUE.JS实现购物车功能