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实现购物车功能全部内容，希望文章能够帮你解决vue实现购物车功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: 【练习案例React七】React结合an... 下一篇:Vue学习之路（基础篇）

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多