Vue实战-购物车案例-6ren

Vue实战-购物车案例

转载作者：知者更新时间：2024-03-13 02:20:48

Vue实战购物车案例帮你更快理解Vue的使用，小白必练

Vue实战-购物车案例

普通购物车

实现的功能：添加商品到购物车，计算总价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">购物车案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表头-->
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>添加购物车</th>
                    </tr>
                    <!--表体-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>{{data.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data"></td>
                    </tr>
                </table>
                <!--购物车选中状态 -->
                <hr>
                <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
                <!--计算总价-->
                <hr>
                总价:{{totalPrice()}}
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            //商品数据
            dataList: [
                {name: 'Python实战', price: 66, number: 2},
                {name: 'Linux实战', price: 55, number: 1},
                {name: 'Java实战', price: 77, number: 1},
            ],
            //购物车
            checkGroup: [],
        },
        methods: {
            //计算总价
            totalPrice(){
                // 总价初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
                }
                return total
            }
        }
    })
</script>
</html>

PS：for循环的多种形式
上面我们使用for (i in 数组/对象)的形式，在js中for循环常用的形式有四种

//方式一： i是索引,循环选中的商品，基于迭代的循环
for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
 }

// 方式二： 基于索引的循环，最普通的
for (var i=0;i<this.checkGroup.length;i++) {
	total += this.checkGroup[i].price * this.checkGroup[i].number
	}

//方式三： 基于迭代 for of (es6)
for (v of this.checkGroup) {
	total += v.price * v.number
 }

// 方式四：forEach  可迭代对象(数组)的方法，数组而言v是值，i是索引
this.checkGroup.forEach(function(v,i){
  this.checkGroup.forEach((v,i)=>{
    total += v.price * v.number
                })

进阶购物车

一键加入购物车功能实现

基于普通购物车实现功能：一键添加购物车功能

通过v-model双向绑定实现，input框绑定change事件， checkbox选中true反之false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">购物车案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表头-->
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <!-- <th>添加购物车</th>-->
                        <th>全选/取消全选&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>

                    </tr>
                    <!--表体-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>{{data.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
                    </tr>
                </table>
                <!--购物车选中状态 -->
                <hr>
                <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
                <!--计算总价-->
                <hr>
                <p style="font-size: 20px">总价:{{totalPrice()}}￥</p>
                <hr>
                <!--是否全选-->
<!--                <p>是否全选： {{checkall}}</p>-->
                <div style="font-size: 20px">
                    <p v-if="checkall === false">是否全选：否 ---  {{checkall}}</p>
                    <p v-else-if="checkall === true">是否全选：是 ---  {{checkall}}</p>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',

        data: {
            //商品数据
            dataList: [
                {name: 'Python实战', price: 66, number: 2},
                {name: 'Linux实战', price: 55, number: 1},
                {name: 'Java实战', price: 77, number: 1},

            ],
            //购物车
            checkGroup: [],
            //全选,默认不全选
            checkall:false
        },
        methods: {
            //计算总价
            totalPrice(){
                // 总价初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
                }
                return total
            },
            //处理全选
            handleAll(){
                if (this.checkall){
                    //全选
                    this.checkGroup = this.dataList
                }else {
                    this.checkGroup=[]
                }
            },
            handleOne(){
                //全选
                if (this.checkGroup.length==this.dataList.length){
                    this.checkall=true
                //不全选
                }else {
                    this.checkall=false
                }
            }
        }
    })
</script>
</html>

商品数量加减的实现

实现功能：通过添加+，-样式来控制商品数量的加减

注意：这里暂时不考虑库存的情况，且减少商品数量做单独处理，解决减少数量小于1的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">购物车案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表头-->
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <!-- <th>添加购物车</th>-->
                        <th>全选/取消全选&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>

                    </tr>
                    <!--表体-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>
                        <!-- 商品减少 -->
                            <button @click="handleCount(data)">-</button>
                            {{data.number}}
                        <!-- 商品增加 -->
                            <button @click="data.number++">+</button>
                        </td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
                    </tr>
                </table>
                <!--购物车选中状态 -->
                <hr>
                <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
                <!--计算总价-->
                <hr>
                <p style="font-size: 20px">总价:{{totalPrice()}}￥</p>
                <hr>
                <!--是否全选-->
<!--                <p>是否全选： {{checkall}}</p>-->
                <div style="font-size: 20px">
                    <p v-if="checkall === false">是否全选：否 ---  {{checkall}}</p>
                    <p v-else-if="checkall === true">是否全选：是 ---  {{checkall}}</p>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',

        data: {
            //商品数据
            dataList: [
                {name: 'Python实战', price: 66, number: 2},
                {name: 'Linux实战', price: 55, number: 1},
                {name: 'Java实战', price: 77, number: 1},

            ],
            //购物车
            checkGroup: [],
            //全选,默认不全选
            checkall:false
        },
        methods: {
            //计算总价
            totalPrice(){
                // 总价初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
                }
                return total
            },
            //处理全选
            handleAll(){
                if (this.checkall){
                    //全选
                    this.checkGroup = this.dataList
                }else {
                    this.checkGroup=[]
                }
            },
            handleOne(){
                //全选
                if (this.checkGroup.length==this.dataList.length){
                    this.checkall=true
                //不全选
                }else {
                    this.checkall=false
                }
            },
            //商品减少
            handleCount(data){
                if (data.number<=1){
                    alert('不能再少了')
                }
                else {
                    data.number--
                }
            }
        }
    })
</script>
</html>

不足：下面的提示信息可以隐藏，个人只是为了提示，商品删除没有写自行实现

如有错误请指正感谢~

文章推荐： css三栏布局总结?

文章推荐： leetcode刷题(剑指 Offer II 020)——回文子字符串的个数

文章推荐： Eureka详解系列(一)--先谈谈负载均衡器

文章推荐：【解决方案】MySQL中的死锁问题还能这样解决（文末送书）

html - 购物车 - 购物车 CSS 中的商品数量
我们都在流行的网站上看到，购物车图标的右上角有一个小图标!我必须在我的 ASP .NET 网页中使用类似的东西。如何让这个图标位于购物车图标的右上角.. 购物车的图标是一个普通的 bootstrap
Cakephp 购物车
Closed. This question does not meet Stack Overflow guidelines 。它目前不接受答案。想改善这个问题吗？更新问题，使其成为 Stack Ov
REST 购物车
可以使用 REST 架构约束来实现购物车吗？我想把我的问题集中在 session 状态上。在实现购物车的典型 MVC 应用程序中，很可能 session 对象将在 session 中管理，购物车作为
Magento 购物车
我的网上商店使用自己的模板，但在我的网站上我使用货币欧元而不是美元。哪里可以编辑啊。 http://i50.tinypic.com/67rvhc.png 最佳答案进入系统>配置。然后在“通用”>“
jQuery 购物车
我想在我的门户中使用购物车。我可以获得 jquery 的购物车插件吗？格纳尼亚尔·祖贝尔最佳答案 http://simplecartjs.com/不是 JQuery，但如果 PayPal 或 Go
c# 购物车
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
PHP 购物车
我正在尝试将产品添加到我的购物车。我收到一条错误消息: 警告:为 foreach() 提供的参数无效它告诉我以下代码出现错误: function isInCart($id) { if (!empt
PHP 购物车添加项目
我目前正在使用 PHP 开发购物车，我正在尝试弄清楚如何使用我编写的代码将商品添加到购物车本身。我的数据库中的项目显示正确，但只有 $item 下的最后一个数组被添加到购物车。以下显示项目。 $res
php - 在laravel项目上未定义路线[购物车]
在我的laravel购物车上，我创建了一个delete函数，使用json或dd函数进行测试时似乎还可以，但是尝试返回路线购物车 View Route [cart] not defined.时，这是一个
.NET MVC 购物车
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
Magento 购物车相同的产品添加到不同的行
将相同的产品添加到购物车时，它正在添加新行，但如果相同的产品 ID 已在购物车中，则需要更新数量。我需要它与数量更新保持一致。最佳答案您需要覆盖 app/code/core/Mage/Sales
显示订单的 PHP 购物车
你好，我正在创建一个用于培训目的的 PHP 商店。我希望用户能够查看他最后下的订单 - 但我很难意识到这一点。我的数据库中有这些表: 客户( child 、姓名、地址...) 产品(pid、pro
php - Javascript 购物车
我正在考虑建立一个迷你购物网站。不涉及支付方式，只是显示和维护的所选产品的总数。这将由商店中的一个人操作以进行和监控销售。概念是:产品应该在页面中显示为大图像，通过点击它们我将它们存储在购物车中。然
php - 购物车-多个属性值
我有以下产品和购物车表格: //产品表 Products: id | Product_value ----------------------- 1 | Product
PHP MYSQL 购物车
我尝试使用 php ang mysql 在 google 中搜索购物车中的代码。当我单击“添加到购物车”按钮时，我的 cart.php 中没有显示任何内容。请帮助我。这是我的产品.php ">ADD
PHP 购物车 - 添加变量
我正在为摄影业务创建 PHP 购物车。这是我尝试的第一个电子商务网站(新手) 我已成功将产品添加到购物车(存储在 session 中)(产品:打印品、 key 圈、磁铁等) 但是我还需要将 image
PHP session 购物车
变量被添加到从另一个页面传递的 session 数组此处为详细信息页面 string(4) "3911" [1]=> string(4) "5005" [2]=> NULL [3]=> strin
ios - 核心数据关系 - 购物车
我的模型中设置了以下核心数据关系。类别 -> 产品 -> 购物车产品 1)) { // handle error } else if (![cartProducts count]) {
javascript - 购物车 - 拖放错误
我已经根据示例实现了jQuery的购物卡:http://jsfiddle.net/RR6z5/1/ 但是有一个小错误。当我将一个元素从产品拖到购物卡，然后无拖放，我从购物卡拖到产品时，产品中的原始元素
Javascript(购物车)出现在其他内容下？
大家好，就 css 和 javascript 而言，我是个新手。我正在使用的新主题是让我的 paypal minicart 显示在内容下方，因此您不能单击它，也不能从中删除内容，但您可以看到购物车稍微

知者

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Vue实战-购物车案例

Vue实战-购物车案例

普通购物车

进阶购物车

一键加入购物车功能实现

商品数量加减的实现