Vue购物车实例练习

news2025/1/15 22:31:40

效果图

功能介绍
  1. 金额 = 单价 * 数量金额会自动根据数量的变化进行变化,我们可以点击按钮增加或减少商品的数量。
  2. 合计金额:只有在序号列号勾选上才会被计入总金额中,金额总数会根据用户的操作自动更新数据。
  3. 删除:如图我们勾选了第2个商品,当我们点击删除时,只会删除被选中的产品。
  4. 全选:点击1次全选会选中所有商品,第2次点击时就会取消已经选中的商品。
  5. 添加:用户可以自己添加商品、商品的单价、数量

代码

表头
<!-- 表头 -->
<tr style="font-weight: 800;">
  <td>序号</td>
  <td>商品</td>
  <td>单价(元)</td>
  <td>数量</td>
  <td>金额(元)</td>
</tr>
商品表
  1. 点击增加或减少会调用方法函数,改变商品的数量
  2. 商品数量采用input,使用v-model实时变化商品的数量,用户可以直接输入商品数量
  3. 金额会根据商品单价和数量自动进行变化
<!-- 商品表 -->
<tr v-for="(value,index) in list">
  <td><input type="checkbox" v-model="value.checked"></td>
  <td>
    <img v-bind:src="value.src" alt="图片" id="commodityImg">
    <span>{{value.name}}</span>
    <span style="font-size: 0.8em; color: #919191;">{{value.introduce}}</span>  
  </td>
  <td style="color: #e00000;">¥{{ value.price }}</td>
  <td style="padding: 0 !important;">
    <button @click="reduce(index)">-</button>
    <input type="text" v-model="value.count">
    <button @click="add(index)">+</button>
  </td>
  
  <!-- 金额会根据商品单价和数量自动进行变化 -->  
  <td style="color: #e00000;font-weight: 800;">¥{{value.price*value.count}}</td>
</tr>
添加商品
<!-- 添加商品 -->
<tr id="add">
  <td></td>
  <td><input type="text" v-model="push.name" placeholder="商品"></td>
  <td><input type="text" v-model="push.price" placeholder="价格"></td>
  <td><input type="text" v-model="push.count" placeholder="数量"></td>
  <td><button id="push" @click="pushValue">添加</button></td>
</tr>
全选、删除、合计等操作
<!-- 全选、删除、合计等操作 -->
<tr>
  <td colspan="2">
    <div @click="selectAll" ><input type="checkbox" v-model="selectAllValue">全选</div>
    <div @click="selectDel" >&nbsp;&nbsp;删除</div>
  </td>
  <td colspan="3">
    合计:<p style="color: #e00000;font-weight: 800;padding: 0.6em 0em; display: contents;">¥{{priceSums}}</p></td> 
</tr>
数据源
data(){
    return{
      selectAllValue:1,
      priceSums:0,
      push:{
        name:null,
        price:null,
        count:null,
        prices:null,
      },
      list:[{
          checked:'false',
          name:'微信公众号',
          src:'https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzkzMjE5OTMwOA==&mid=2247487964&idx=1&sn=f7474b00c99bb7017530e4fbffd0c62d&send_time=',
          introduce:'扫码关注,和群友们一起交流学习',
          price:9999,
          count:2,
          prices:null,
      },
      {
          checked:'false',
          name:'QQ交流群',
          src:'data:image/png;base64,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',
          introduce:'',
          price:6666,
          count:1,
          prices:null,
      },
      { 
          checked:'false',
          name:'MacBookPro',
          src:'https://img10.360buyimg.com/n2/jfs/t1/203950/20/28591/140129/637ca996E10cf6f5c/bb31749afd714364.jpg',
          introduce:'',
          price:21488,
          count:1,
          prices:null,
      }],    
    }
  },
computed计算属性,根据金额列的变化而变化

计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。

computed:{
    // 计算总和
    priceSums:function(){
      var sum = 0;
      for(var i = 0; i != this.list.length; i++){
        if(this.list[i].checked == true){
          sum = sum + this.list[i].price * this.list[i].count;
        }   
      }
      return sum;
    }
  },
利用methods定义一些方法
methods:{
    //减少物品个数
    reduce:function(index){
      this.list[index].count = this.list[index].count - 1;
      if(this.list[index].count == -1){
        this.list.splice(index,1)
      }
    },
    
    // 增加物品个数
    add:function(index){
      this.list[index].count = this.list[index].count + 1;
    },
    
    // 添加新元素在购物车中
    pushValue:function(){    
      console.log(this.push.name)
      if(this.push.name == undefined) return 0;  
      for(var i=0; i<this.lsist.length; i++){
        if(this.list[i].name == this.push.name){
          alert("你已勾选此产品");
          return 0;
        }
      }
      this.list.push(this.push);
      this.push = {name:'', price:null, count:null};
    },
    
    // 选中所有
    selectAll:function(){
      for(var i=0,j=0; i<this.list.length; i++){
        if(this.list[i].checked == true){
          if(i==j){
            for(var k=0; k<this.list.length; k++){
              this.list[k].checked = false;
            }
            this.selectAllValue = false;
            return 0;    
          }
          j++;
        }
        this.list[i].checked = true;
      }
      this.selectAllValue = true;
    },
    
    // 删除选中
    selectDel:function(){
      if(confirm("你确认要删除吗?","提示框 ")){
        for(var i=0; i<this.list.length; i++){
          if(this.list[i].checked == true){
            this.list.splice(i,1);
          }
        }
      }
    }
  }

公众号:小知识酷,回复“VueShoppingCart1”获取完整源码

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

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

相关文章

【开源项目】Easy-Trans数据翻译服务的快速入门及原理解析

项目介绍 easy-trans是一款用于做数据翻译的代码辅助插件&#xff0c;利用mybatis plus/jpa/beetsql 等ORM框架的能力自动查表&#xff0c;让开发者可以快速的把id/字典码 翻译为前端需要展示的数据。 快速入门 maven依赖 <properties> <fhs.release.version>2.…

痞子衡嵌入式:MCUBootUtility v5.0发布,初步支持i.MXRT1180

--   痞子衡维护的NXP-MCUBootUtility工具距离上一个大版本(v4.0.0)发布过去4个多月了&#xff0c;期间痞子衡也做过两个小版本更新&#xff0c;但不足以单独介绍。这一次痞子衡为大家带来了全新大版本v5.0.0&#xff0c;这次更新主要是想和大家特别聊聊恩智浦新一代 i.MXRT …

一个传统剧团的自救

今天我和大家分享一个 最近我在网上看到的案例。 是这样说的 在岭南地区 有一个较为偏远的地方 当地有一个传统的戏团 他们依托当地传统习俗 把戏曲一代一代流传下来 但是到了现在。 戏团面临传承中断 戏团解散的困境。 当地文化宣传员小林 知道这个情况后。 立马展开调查 并且…

Linux——gcc/g++编译器

gcc是用来编译C语言代码的编译器&#xff0c;而g是用来编译C代码的编译器的。 而gcc和g都是软件&#xff0c;需要使用yum进行下载 注&#xff1a;需要使用root权限才能下载 在C语言编译的过程中&#xff0c;会有四个过程: 1预处理&#xff0c;2编译&#xff0c;3汇编&#xf…

CB06551 PRD-B040SSIB-63

​ CB06551 PRD-B040SSIB-63 步进电机驱动器有什么参数   步进电机驱动器基本参数如下&#xff1a; a、供电电源&#xff0c;可据所驱动步进电机的电源规格进行选择。交流电源供电的&#xff0c;如AC80V&#xff0c;可用220V市电经降压变压器&#xff0c;提供给驱动器。选用变…

YOLO-NAS 如何将 YOLO-v8 甩在身后?

在使用目标检测模型方面&#xff0c;我已经积累了一些经验。所以当我听说这个火热的新玩意儿叫做 YOLO-NAS 时&#xff0c;我知道我必须去尝试一下。让我告诉你&#xff0c;这个家伙真是让人惊叹。它就像是目标检测模型中的埃隆马斯克——大胆、创新&#xff0c;稍微有点让人害…

关于我被敲诈勒索骗了 1w 多这件事

大家好&#xff0c;我是程序员贺同学。 昨晚遭遇了人生中第一次诈骗&#xff0c;损失金额 1w多&#xff0c;趁这两天情绪缓了缓&#xff0c;把过程记录了下来&#xff0c;希望对看到的人有所帮助。 昨晚报完警回来快 23 点&#xff0c;把手机上的重要图片&#xff0c;视频&…

嵌入式 QT多界面切换

目录 1. 添加界面类实现 1.1 添加第二个界面的类 1.2 添加第2个界面的头文件和槽函数 2. 工程管理实现 在Qt中&#xff0c;多界面切换是指在一个应用程序中使用多个不同的界面&#xff0c;并在它们之间进行切换。这种切换可以是用户触发的&#xff0c;例如点击按钮或选择菜…

建议收藏,最全ChatGPT 中文调教指南:提供各个领域的角色提示词(prompts)及使用技巧,当然也有不正经指南

ChatGPT是一种基于GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型的聊天机器人&#xff0c;能够回答用户提出的问题和进行对话。它是由OpenAI开发的人工智能产品&#xff0c;具有自然语言处理和深度学习技术。 ChatGPT在日常的对话中&#xff0c;表现的非…

深度剖析JVM调优法则,神器Arthas从CPU/内存出发轻松掌握调优实战技巧

场景一、CPU过高 CPU占用过高排查思路&#xff1a; step1&#xff1a;进行arthas java -jar arthas-boot.jar step2&#xff1a;输入deashboard 如何不记得命令可以在控制台输入help step3&#xff1a;查看线程栈信息 thread ID 从线程栈信息中定位到具体的java代码。 场…

Ubuntu关机、重启和注销命令

学习linux系统&#xff0c;最重要的是使用各种命令对系统进行操作&#xff0c;打开各种软件&#xff0c;本次主要分析ubuntu中的关机&#xff0c;重启&#xff0c;注销命令的使用详解。 关机命令 shutdown 1)使用shutdown --help可以查看shutdown命令如何使用&#xff0c;当然也…

mssql计划

介绍 MSSQL计划是一个用于Microsoft SQL Server数据库管理的工具。它包含了一系列的功能&#xff0c;可以帮助管理员进行数据库的备份、恢复、优化、监控等操作&#xff0c;提高数据库的性能和可靠性。 MSSQL计划的主要功能包括&#xff1a; 备份和恢复数据库&#xff1a;可以…

【运维知识进阶篇】集群架构-HTTPS证书详解

HTTPS证书在企业中非常重要&#xff0c;因为HTTP不安全&#xff0c;采用HTTP协议容易受到劫持和篡改&#xff0c;如果是采用HTTPS&#xff0c;数据在传输过程中加密&#xff0c;可以避免报文信息被窃取篡改&#xff0c;避免网站传输时信息泄露。实现https&#xff0c;要了解SSL…

记录--九个超级好用的 Javascript 技巧

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 在实际的开发工作过程中&#xff0c;积累了一些常见又超级好用的 Javascript 技巧和代码片段&#xff0c;包括整理的其他大神的 JS 使用技巧&#xff0c;今天筛选了 9 个&#xff0c;以供大家参考…

从选型工具到内核优化,从替代方法到迁移改造,河北移动联合云和恩墨以创新树标杆,推进国产数据库应用落地...

势在必行&#xff0c;电信行业国产化改造适逢其时 自十四五规划以来&#xff0c;伴随着“科技创新”和“信息安全”等相关政策的密集出台&#xff0c;我国信创产业正式进入高速发展期&#xff0c;力求通过构建各行业全栈国产IT体系&#xff0c;实现科技技术自主可控&#xff0c…

原来我真的不懂Spring

(1)Spring的生命周期:简单概括为4个阶段: 1.1 创建对象 1.2 DI属性赋值 1.3 初始化 1.4 销毁 (2) Bean的作用域 : 1. Singleton: 单例 2. Prototype: 多例 3. Request: 每次http请求都会创建一个新的bean 4. Session: ~ 5. ApplicationContext: ~ (3) 注册Bean的4种方式…

企业即时通讯如何让企业沟通变得简单

企业即时通讯&#xff0c;企业之间的沟通协作&#xff0c;最核心的价值在于能够将复杂的工作任务简化为更高效、更易于沟通的协作方式。如果员工之间没有协作&#xff0c;就没有办法进行高效的沟通&#xff0c;就会出现组织低效、沟通效率低等问题。那么如何将复杂的工作任务简…

多路复用是怎么回事?

《计算机组成原理》讲述的是如何去理解程序和计算。《操作系统》讲述的是如何去理解和架构应用程序。《计算机网络》讲述的是如何去理解今天的互联网。 现在来看&#xff0c;“计算机网络”也许是一个过时的词汇&#xff0c;它讲的是怎么用计算实现通信。今天我们已经发展到了一…

HTTPS(面试高频必须掌握)

目录 一、HTTPS背景 二、HTTPS 的工作过程 1. 对称加密 2.非对称加密 3. HTTPS 基本工作过程 3.1 使用对称密钥 3.2 引入非对称密钥&#xff08;面试高频问题&#xff09; 3.3 黑客的手段 3.4 引入证书 3.5 捋一捋 3.6 SSL/TLS 三、HTTP 与 HTTPS 区别&#xff08;…

强化学习的应用领域和案例

你好&#xff0c;我是zhenguo(郭震) 今天总结强化学习第四篇&#xff1a;强化学习的应用领域 第一&#xff1a;游戏领域。 强化学习在游戏领域有很多应用&#xff0c;如围棋、象棋、扑克等游戏的AI对战。 例如&#xff0c;AlphaGo使用强化学习技术&#xff0c;在围棋比赛中击败…