广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue实现购物车计算总价功能
  • 879
分享到

Vue实现购物车计算总价功能

vue购物车计算vue计算总价vue购物车 2022-11-13 06:11:03 879人浏览 薄情痞子
摘要

用Vue实现一个购物车计算总价的功能,供大家参考,具体内容如下 代码 html <div id="app">         <div class="panel

Vue实现一个购物车计算总价的功能,供大家参考,具体内容如下

代码

html

<div id="app">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">购物车</h3>
            </div>
            <div class="panel-body">

                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model="checkAll">
                        全选
                    </label>
                </div>

                <ul class="list-group">
                    <li class="list-group-item" v-for="(item) in list" :key="item.id">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="item.checked">
                                {{item.name}}--{{item.price}}*{{item.quantity}}
                                <button type="button" @click="item.quantity>1?item.quantity-=1:1"
                                    class="btn btn-success">-</button>
                                <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
                            </label>
                        </div>
                    </li>
                </ul>
                <p>总价:{{sumPrice}}</p>
            </div>
        </div>
</div>

js

<script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        id: 1,
                        name: "小米10",
                        price: 3999,
                        checked: false,
                        quantity: 1

                    },
                    {
                        id: 2,
                        name: "荣耀30",
                        price: 2999,
                        checked: false,
                        quantity: 1

                    },
                    {
                        id: 3,
                        name: "魅族17",
                        price: 3699,
                        checked: false,
                        quantity: 1

                    },
                    {
                        id: 4,
                        name: "苹果11",
                        price: 5499,
                        checked: false,
                        quantity: 1

                    }
                ],
            },
            // computed计算属性,
            //  他有一个特点,可以依赖当前数据改变之后进行重新计算
            computed: {
                checkAll: {

                    //设置值,当点击全选按钮的时候触发
                    set(v) {
                        this.list.forEach((item) => (item.checked = v))
                    },
                    //取值,当列表中的值改变之后触发,需要return
                    get() {
                        return (
                            this.list.length ===
                            this.list.filter((item) => item.checked).length
                        )
                    }
                },
                //计算总价,选择被选中的元素
                sumPrice() {
                    return this.list.filter((item) => item.checked).reduce((pre, cur) => {
                        return pre + cur.price * cur.quantity
                    }, 0)
                },

            },
            methods: {
                save() {
                    console.log(this.list.filter((item) => item.checked))
                }
            }
        })
</script>

结构是用bootstrap写的,记得下载并引入文件

<link rel="stylesheet" href="./bootstrap.min.CSS" >

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Vue实现购物车计算总价功能

本文链接: https://www.lsjlt.com/news/145923.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue实现购物车计算总价功能
    用Vue实现一个购物车计算总价的功能,供大家参考,具体内容如下 代码 html <div id="app">         <div class="panel ...
    99+
    2022-11-13
    vue购物车计算 vue计算总价 vue购物车
  • Vue怎么实现购物车计算总价功能
    本文小编为大家详细介绍“Vue怎么实现购物车计算总价功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么实现购物车计算总价功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果:代码html<di...
    99+
    2023-06-30
  • js实现购物车加减以及价格计算功能
    本文实例为大家分享了js实现购物车加减以及价格计算的具体代码,供大家参考,具体内容如下 需求说明: 1、单击“半闭”按钮时,关闭当前页面购物车页面 2、单击“移入收藏”弹出收藏提示 ...
    99+
    2022-11-12
    js购物车加减计算 js购物车加减 js购物车价格计算
  • Vue模拟实现购物车结算功能
    本文实例为大家分享了Vue实现购物车结算功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <...
    99+
    2022-11-12
    Vue 购物车 结算
  • vue简单实现购物车结算功能
    本文实例为大家分享了vue简单实现购物车结算的具体代码,供大家参考,具体内容如下 样式没有写 <template>  <div class="about cont...
    99+
    2022-11-13
    vue 购物车 结算
  • vue实现书籍购物车功能
    本文实例为大家分享了vue实现书籍购物车功能的具体代码,供大家参考,具体内容如下 效果图 点击增加、减少购买数量和移除总价格会变化 代码 <!DOCTYPE html&g...
    99+
    2022-11-12
    vue书籍购物车 vue书籍购物 vue购物车
  • vue实现购物车完整功能
    vue实现购物车商品单选、全选及商品数量和总价计算,供大家参考,具体内容如下 效果展示 HTML <template>   <div class="buyCar"...
    99+
    2022-11-13
    vue 购物车
  • vue如果实现购物车功能
    本文小编为大家详细介绍“vue如果实现购物车功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如果实现购物车功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 原理分析...
    99+
    2022-10-19
    vue
  • vue如何实现购物车功能
    本篇内容主要讲解“vue如何实现购物车功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何实现购物车功能”吧!如图,需要有加入购物车的标识思路如下:点击购物车按钮时将商品的id,titl...
    99+
    2023-06-30
  • vue实现简单的购物车功能
    本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 1.实现效果: 2.涉及到的知识点: toFixed函数、过滤器、reduce高阶函数、v-bin...
    99+
    2022-11-13
    vue 购物车
  • javaweb实现购物车功能
    本篇文章讲的是如何使用javaweb相关知识模拟购物车功能 (web练手小项目) 使用到的相关知识(部分知识点在文章中简单涉及到):        html  cs  javascript  jsp  servlet   ajax  jQu...
    99+
    2023-10-24
    mybatis java mysql servlet tomcat
  • python实现购物车功能
    本文实例为大家分享了python实现购物车功能的具体代码,供大家参考,具体内容如下 功能要求: 要求用户输入总资产,例如:2000显示商品列表,让用户根据序号选择商品,加入购物车购买...
    99+
    2022-11-13
    python 购物车
  • jquery实现购物车功能
    本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下 html ​<!DOCTYPE html> <html> ...
    99+
    2022-11-12
    jquery 购物车
  • python购物车功能实现
    name = "gaowang" pwd = "123.abc" list_he=[]          #定义空列表,后面接收 for i in range(3):     username = input("请输入您的账号:")    ...
    99+
    2023-01-31
    购物车 功能 python
  • vue实现购物车功能(亲测可用)
    本文实例为大家分享了vue实现购物车功能的具体代码,供大家参考,具体内容如下 如图,需要有加入购物车的标识 思路如下:点击购物车按钮时将商品的id,title,imgUrl(海报图...
    99+
    2022-11-13
    vue 购物车
  • vue如何实现简单的购物车功能
    这篇文章主要介绍“vue如何实现简单的购物车功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue如何实现简单的购物车功能”文章能帮助大家解决问题。1.实现效果:2.涉及到的知识点:toFixed...
    99+
    2023-07-02
  • 原生js实现计算购物车总金额的示例
    随着vue、react、angular等MVVM框架的兴起。让之前需要对dom进行复杂操作才能实现的需求变得如此简单。确实,作为数据驱动dom的框架,让我们在项目中变得愈加游刃有余。...
    99+
    2023-05-16
    js计算购物车总金额 js 购物车总金额
  • js实现购物车加减和价格运算
    本文实例为大家分享了js实现购物车加减和价格运算的具体代码,供大家参考,具体内容如下 主要实现功能:购物车的加减,单件商品价格的运算,总价格的运算。价格保留两位小数。 <...
    99+
    2022-11-12
    js购物车价格运算 js购物车加减 js价格运算
  • js实现购物车计算的方法
    本文实例为大家分享了js实现购物车计算的具体代码,供大家参考,具体内容如下 以店铺为单位,每个店铺下面有对应的商品选项,可全选,商品单选,店铺单选,商品数量加减,删除 代码: ...
    99+
    2022-11-12
    js 购物车 计算
  • 如何使用jQuery实现购物车结算功能
    这篇文章主要介绍如何使用jQuery实现购物车结算功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html> <html...
    99+
    2022-10-19
    jquery
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作