VUE购物车商品的添加、删除和计算总金额功能

news2025/1/11 7:15:43

效果

在这里插入图片描述

代码

<template>
  <div id="box">
    <!--全选功能-->
    <input type="checkbox" @change="handleChange" v-model="isAllChecked" />
    <!--绑定事件,不选用click,使用change每次check值改变会触发双向绑定布尔值-->
    <ul>
      <li v-for="data in datalist">
        <input type="checkbox" v-model="checkgroup" :value="data" @change="handleLiChange" />
        <!--
                    v-model绑定数组,且要有value值
                    value使用数组绑定
                    :value="data.number||data.price||data.id||data.number*data.price"
                -->
        {{ data }}
        <!--设置添加删除按钮-->
        <button @click="handleDelClick(data)">del</button>
        <!--用户体验限制不小于0 所以不能使用data.number-- -->
        {{ data.number}}<!--当前数量-->
        <button @click="data.number++">add</button>
        <!--data.number++自增1点击事件,简单逻辑可直接使用代码-->
      </li>
    </ul>

    {{ checkgroup }}
    <p>总金额计算:{{ getSum() }}</p>
    <!--函数表达式,函数要有返回值-->
  </div>
</template>
<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
export default {
  name: "",
  setup() {
    let router = useRouter(),
      route = useRoute();
    const data = reactive({
      checkgroup: [],
      isAllChecked: false,
      datalist: [
        {
          name: "商品1",
          price: 10,
          number: 1,
          id: "1",
        },
        {
          name: "商品2",
          price: 20,
          number: 2,
          id: "2",
        },
        {
          name: "商品3",
          price: 30,
          number: 3,
          id: "3",
        },
      ],
      getSum() {
        // 函数计算中的状态改变后, 函数会自动执行一遍
        var sum = 0;
        for (var i in this.checkgroup) {
          sum += this.checkgroup[i].number * this.checkgroup[i].price;
        }
        return sum;
      },

      handleChange() {
        //全选判断
        console.log("改变了", this.isAllChecked);
        if (this.isAllChecked) {
          this.checkgroup = this.datalist; //全选的话为原数组
        } else {
          this.checkgroup = []; //为假即全不选,即赋值空数组
        }
      },

      handleLiChange() {
        //判断是不是都勾选
        console.log("handleLiChange-判断是不是都勾选");
        if (this.checkgroup.length === this.datalist.length) {
          //判断勾选数组与原始数组是否全等
          this.isAllChecked = true;
        } else {
          this.isAllChecked = false;
        }
      },

      handleDelClick(data) {
        //数量减少函数
        // console.log(data)
        data.number--;
        if (data.number === 0) {
          data.number = 1; //减到0的情况下永远赋值为1
        }
      },
    });
    onBeforeMount(() => { });
    onMounted(() => { });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>
<style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1373515.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

swing快速入门(四十三)JTree的常见节点关系用法

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff08;一共16个常见用法&#xff0c;内容较多此处概述一下&#xff09; ⚡按各类关系查询节点或节点组内容 ⚡按各类关系查询某种关系是否成立 ⚡按各类关系查询符合某些关系的数量 package swing41_50;import javax.sw…

【vitest 单元测试】如何蹭 ant-design-web3 的PR

这篇文章分享单测经验&#xff0c;希望你能收获到有用的单测知识或者pr思路&#xff0c;填补单测的过程可以深刻理解组件内部的每一个流程&#xff0c;相信一定有所收获。 ant-design-web3 前言查看单测覆盖情况运行命令&#xff0c;本地会生成一份临时目录通过live server打开…

java基础之Java8新特性-Optional

目录 1.简介 2.Optional类常用方法 3.示例代码 4.示例代码仓库地址 1.简介 Java 8引入了一个重要的新特性&#xff0c;即Optional类。Optional类是为了解决空指针异常而设计的。 在Java中&#xff0c;当我们尝试访问一个空对象的属性或调用其方法时&#xff0c;很容易抛出…

[C#]winform使用纯opencvsharp部署yolox-onnx模型

【官方框架地址】 https://github.com/Megvii-BaseDetection/YOLOX 【算法介绍】 YOLOX是一个高性能的目标检测算法&#xff0c;它是基于YOLO&#xff08;You Only Look Once&#xff09;系列算法的Anchor Free版本。YOLOX由Megvii Technology的研究团队开发&#xff0c;并在…

“0龋齿”计划爱牙护齿公益校园行——象岭小学站

为了向儿童普及口腔健康知识&#xff0c;提高口腔健康意识&#xff0c;减少口腔疾病的发生&#xff0c;以及贯彻落实《健康中国行动&#xff08;2019-2030年&#xff09;》&#xff0c;2024年1月5日至1月6日&#xff0c;由惠州市挺秀慈善基金会主办&#xff0c;惠州市挺秀慈善会…

优化 ParamValidator,让编辑器Pycharm智能提示校验方法

目录 一、前置说明1、总体目录2、相关回顾3、本节目标 二、操作步骤1、项目目录2、代码实现3、测试代码4、日志输出 三、后置说明1、要点小结2、下节准备 一、前置说明 1、总体目录 《 pyparamvalidate 参数校验器&#xff0c;从编码到发布全过程》 2、相关回顾 基于 Valid…

HarmonyOS@Provide装饰器和@Consume装饰器:与后代组件双向同步

Provide装饰器和Consume装饰器&#xff1a;与后代组件双向同步 Provide和Consume&#xff0c;应用于与后代组件的双向数据同步&#xff0c;应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递&#xff0c;Provide和Consume摆脱参数传…

vue3.2引用unplugin-vue-components插入,解放开发中import组件

目录 前言引用unplugin-vue-components插件的优缺点优点缺点 unplugin-vue-components插件引入安装插件配置vite配置更新TypeScript配置使用代码位置 总结Q&A 前言 unplugin-vue-components是一个用于Vue.js项目的插件&#xff0c;特别适用于Vite和Webpack构建工具。它的主…

Python基础学习(一)

Python基础语法学习记录 输出 将结果或内容呈现给用户 print("休对故人思故国&#xff0c;且将新火试新茶&#xff0c;诗酒趁年华") # 输出不换行&#xff0c;并且可以指定以什么字符结尾 print("青山依旧在",end ",") print("几度夕阳红…

Qt中QGraphicsView总体架构学习

前沿 前段时间学习了下如何在QGraphicsView架构中绘制刻度尺&#xff0c;主要是与OnPainter中进行比较的&#xff0c;那么今天就来详细讲解下我对QGraphicsView框架的认知吧~ 最近一段时间想学习下&#xff0c;如果我有不正确的&#xff0c;欢迎留言探讨哟~ QGraphicsView架…

Java-布隆过滤器的实现

文章目录 前言一、概述二、误差率三、hash 函数的选择四、手写布隆过滤器五、guava 中的布隆过滤器 前言 如果想要判断一个元素是不是在一个集合里&#xff0c;一般想到的是将所有元素保存起来&#xff0c;然后通过比较确定。链表&#xff0c;树等等数据结构都是这种思路&…

软件消抖的独立式键盘输入实验

#include<reg51.h> // 包含51单片机寄存器定义的头文件 sbit S1P1^4; //将S1位定义为P1.4引脚 sbit LED0P3^0; //将LED0位定义为P3.0引脚 /************************************************* 函数功能&#xff1a;延时约30ms ***********************…

用于生成信息提取的大型语言模型综述

论文地址&#xff1a;https://arxiv.org/pdf/2312.17617.pdf 代码仓库&#xff1a;https://github.com/quqxui/Awesome-LLM4IE-Papers 信息抽取&#xff08;IE&#xff09;旨在从纯自然语言文本中提取结构化知识&#xff08;如实体、关系和事件&#xff09;。最近&#xff0c…

Edge 浏览器如何设置自动刷新

Edge 浏览器设置自动刷新有两种方式 安装Edge浏览器自动刷新扩展更改页面的源代码文件 目录 方式一&#xff1a;Edge 自动刷新扩展实现&#xff08;推荐&#xff09; 方式二&#xff1a;更改页面的源代码文件 实现页面自动刷新&#xff08;不推荐&#xff09; 方式一&#xff…

Qt 6之六:Qt Designer介绍

Qt 6之六&#xff1a;Qt Designer介绍 Qt Designer是一个可视化的用户界面设计工具&#xff0c;用于创建Qt应用程序的用户界面&#xff0c;允许开发人员通过拖放和布局来设计和创建GUI界面。 Qt 6之一&#xff1a;简介、安装与简单使用 https://blog.csdn.net/cnds123/articl…

小程序系列--3.宿主环境简介

一. 什么是宿主环境&#xff1f; 宿主环境&#xff08;host environment&#xff09;指的是程序运行所必须的依赖环境。例如&#xff1a; Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的&#xff0c;所以&#xff0c;Android 是安…

软件测试|Python urllib3库使用指南

简介 当涉及到进行网络请求和处理HTTP相关任务时&#xff0c;Python的urllib3库是一个强大且灵活的选择。它提供了一种简单的方式来执行HTTP请求、处理响应和处理连接池&#xff0c;使得与Web服务进行交互变得更加容易。本文将详细介绍如何使用urllib3库进行网络请求。 安装u…

2024 年您应该了解的最新远程工作统计数据

远程工作是疫情后新常态的一部分&#xff0c;但在角色转换时是否值得为自己的工作安排而奋斗呢&#xff1f;以下是一些支持您选择的统计数据。 远程工作改变了就业格局&#xff0c;因此当您寻求下一份工作时&#xff0c;您可能希望了解该领域的最新趋势。 当您努力决定哪种工…

uniapp中实现H5录音和上传、实时语音识别(兼容App小程序)和波形可视化

文章目录 Recorder-UniCore插件特性集成到项目中调用录音上传录音ASR语音识别 在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能&#xff0c;uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好&#xff0c;用Recorder插件可避免…

【Vue3】2-4 : 声明式渲染及响应式数据实现原理

本书目录&#xff1a;点击进入 一、声明式渲染 1.1 什么是JS表达式&#xff1a;能够进行赋值的操作 ▶ 正确 ▶ 错误示例 二、示例&#xff1a;2秒后&#xff0c;页面中 message 由 hello world 变成 hi vue ▶ 效果 三、原理&#xff1a;利用ES6的Proxy对象对底层进…