VUE简易购物车程序

目录

效果预览图

完整代码 


效果预览图

完整代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 700px;
            border-collapse: collapse;
            margin: 50px auto;
        }
        tr{
            height: 50px;
        }
        th{
            background: #eee;
        }
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <th><input type="checkbox" v-model="qx" @change="aa" ></th>
                <th>序号</th>
                <th>书名</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <td><input type="checkbox" v-model="item.bol" @change="qx2"></td>
                <td>{{index}}</td>
                <td>{{arr[index].name}}</td>
                <td>{{arr[index].dj}}</td>
                <td><button @click="zj(index)">+</button>{{arr[index].num}}<button @click="js(index)">-</button></td>
                <td>{{arr[index].dj*arr[index].num}}</td>
                <td><button @click="sc(index)">删除</button></td>
            </tr>
            <tr>
                <td>总价</td>
                <td colspan="6">{{total}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
createApp({
    data() {
        return {
            arr:[
                {name:'我在精神病院学斩神',dj:'39',num:1, bol:true},
                {name:'诛仙',dj:'59',num:1, bol:true},
                {name:'剑来',dj:'39',num:1, bol:true},
                {name:'雪中悍刀行',dj:'49',num:1, bol:true},
                {name:'大奉打更人',dj:'59',num:1, bol:true},
                {name:'完美世界',dj:'49',num:1, bol:true},
                {name:'仙逆',dj:'29',num:1, bol:true},
            ],
            qx:true,
        }
    },
    methods: {
        zj(index){
           this.arr[index].num+=1
        },
        js(index){
           this.arr[index].num-=1
           if (this.arr[index].num<1) {
            this.arr[index].num=1
            alert('每件商品最少要买一件')
           }
        },
        sc(index){
            this.arr.splice(index,1)
            this.qx2()
        },
       qx2(){
            let n = 0
            this.arr.forEach((item,index)=>{
                if (item.bol) {
                    n+=1;
                }
            })
            if (n == this.arr.length) {
                this.qx = true;
            }else if (n != this.arr.length){
                this.qx = false
                console.log(this.qx);
            }
        },
      aa(){
        if (this.qx==false) {
            this.arr.forEach((item,index)=>{
                    item.bol = false
                })
        }
      }
        
    },
    computed:{
        total(){
            let t = 0;
            this.arr.forEach((item,index)=>{
                if(item.bol){
                    t += item.num*item.dj;
                }
            });
            return t;
        },
    },
    watch:{
        qx(newVal,oldVal){
            if (newVal) {
                this.arr.forEach((item,index)=>{
                    item.bol = true
                })
            }
      }
    }
}).mount('#app')
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构初阶】树,二叉树

树&#xff0c;二叉树 1.树概念及结构1.1树的概念1.2 树的相关概念1.3 树的表示1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构2.1概念2.2现实中的二叉树2.3 特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储结构 1.树概念及结构 1.…

开发知识点-ArkTS-鸿蒙开发-Typescript

Typescript IED IED https://developer.harmonyos.com/cn/develop/deveco-studio/#download

我的第一次SACC之旅

今年有很多第一次&#xff0c;第一次作为“游客”参加DTCC&#xff08;中国数据库大会&#xff09;&#xff0c;第一次作为讲师参与ACDU中国行&#xff08;成都站&#xff09;&#xff0c;第一次参加OB年度发布会&#xff08;包含DBA老友会&#xff09;&#xff0c;而这次是第一…

弹窗concrt140.dll丢失的解决方法,深度解析concrt140.dll丢失的原因

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示或者系统崩溃的情况。其中&#xff0c;concrt140.dll是一个常见的错误提示&#xff0c;这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题&#xff0c;本文将介绍5种详细的解决方法&#xff0c;帮助您恢…

SpringBoot进阶——解释springboot的自动配置原理

相关的博客文章如下&#xff1a; SpringBootApplication注解的理解——如何排除自动装配 & 分布式情况下如何自动加载 & nacos是怎么被发现的 引出 1.spring.factories文件存储能够进行自动配置的Bean信息&#xff1b; 2.EnableAutoConfiguration关闭数据源的自动配置…

SpringBoot——自定义start

优质博文&#xff1a;IT-BLOG-CN 一、Mybatis 实现 start 的原理 首先在写一个自定义的start之前&#xff0c;我们先参考下Mybatis是如何整合SpringBoot&#xff1a;mybatis-spring-boot-autoconfigure依赖包&#xff1a; <dependency><groupId>org.mybatis.spr…

【Linux】一文看懂基础IO并模拟实现

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法…感兴趣就关注我吧&#xff01;你定不会失望。 本篇导航 0. C语言的文件接口1. 系统的文件接口1.1 open打开文件1.2 write写入文件 2. 文件系统介绍2.1 如何理解一切皆文件? 3. 输入输…

Pyqt5设计师中如何插入图片

问题描述&#xff1a;Pyqt5设计师中如何插入图片。使用Pyqt5做一个示意图界面&#xff0c;是一个”假界面“。 问题解决&#xff1a; 第一步&#xff0c;从Widget Box中拖入一个Label&#xff0c;具体如下图所示。 第二步&#xff0c;在右侧属性编辑器→QLabel→pixmap中选择…

从 CoT 到 Agent,最全综述来了!上交出品

就在前两天&#xff0c;我们刚刚和大家聊了聊最近相当火爆的 AI Agents 这一概念&#xff1a;聊聊我对AI Agents技术的一些看法。水平所限&#xff0c;我们也只是浅浅为大家梳理了一下 AI Agents 的概念发展与其代表性技术&#xff0c;一来不深入二来不细致&#xff0c;只能供大…

【Web-Note】 JavaScript概述

JavaSript基本语法 JavaSript程序不能独立运行&#xff0c;必须依赖于HTML文件。 <script type "text/javascript" [src "外部文件"]> JS语句块; </script> script标记是成对标记。 type属性&#xff1a;说明脚本的类型。 "text/jav…

机器学习库:numpy

☁️主页 Nowl &#x1f525;专栏《机器学习实战》 《机器学习》 &#x1f4d1;君子坐而论道&#xff0c;少年起而行之 文章目录 写在开头 基本数据格式 array 数据定位 argmax 数据生成 random.rand random.randn random.randint 维度拓展 expand_dim 结语 写在…

python桌面开发PyQt6库和工具库QTDesigner安装和配置

一、安装PyQt6 二、安装pyqt6-tools 三、安装外部工具 四、创建QTDesigner 1.首先查找designer.exe的路径&#xff08;可以自己在窗口中选择&#xff0c;也可以使用Everything搜索&#xff09; 2.使用Everything搜索后会出现多个designer.exe,选中&#xff0c;OpenPath 3.选择…

单片机学习7——定时器/计数器编程

#include<reg52.h>unsigned char a, num; sbit LED1 P1^0;void main() {num0;EA1;ET01;//IT00;//设置TMOD的工作模式TMOD0x01;//给定时器装初值&#xff0c;50000,50ms中断20次&#xff0c;就得到1sTH0(65536-50000)/256;TL0(65536-50000)%256;TR01; // 定时器/计数器启…

【Spring Boot】如何集成Swagger

Swagger简单介绍 Swagger是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化RESTful风格的Web服务。功能主要包含以下几点&#xff1a; 可以使前后端分离开发更加方便&#xff0c;有利于团队协作接口文档可以在线自动生成&#xff0c;有利于降低后端开发人员编写…

二叉树经典面试题—折纸

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 1 折纸问题1.1 解决思路1.2 实现代码 &#x1f48e;总结 1 折纸问题 1.1 解决思路 请把一段纸条竖着放在桌子上&#xff0c;然后从纸条的下边向上方对折1次&#xff0c;压出折痕后展开。此时折痕是凹下去的&#xf…

包你学会十大内排序算法,广度深度兼备,动图演示,详细源码

内排序算法合集 文章目录 内排序算法合集前言冒泡排序冒泡排序的实现冒泡排序的简单实现冒泡排序的优化版本冒泡排序的复杂度分析 简单选择排序简单选择排序的实现简单选择排序的复杂度分析 直接插入排序直接插入排序的实现直接插入排序的复杂度分析 希尔排序希尔排序原理希尔排…

059-第三代软件开发-巧用工控板LED指示灯引脚

第三代软件开发-巧用工控板LED指示灯引脚 文章目录 第三代软件开发-巧用工控板LED指示灯引脚项目介绍巧用工控板LED指示灯引脚第一种方式第二种方式 总结 关键字&#xff1a; Qt、 Qml、 Power、 继电器、 IO 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项…

Leetcode—28.找出字符串中第一个匹配项的下标【简单】

2023每日刷题&#xff08;四十&#xff09; Leetcode—28.找出字符串中第一个匹配项的下标 实现代码 int strStr(char* haystack, char* needle) {int len1 strlen(haystack);int len2 strlen(needle);int idx -1;int i 0;while(i < len1 - len2) {if(strncmp(haystac…

Django之admin页面样式定制(Simpleui)

好久不见&#xff0c;各位it朋友们&#xff01; 本篇文章我将向各位介绍Django框架中admin后台页面样式定制的一个插件库&#xff0c;名为Simpleui。 一&#xff09;简介 SimpleUI是一款简单易用的用户界面&#xff08;UI&#xff09;库&#xff0c;旨在帮助开发人员快速构建…

数据库基础教程之创建触发器,实现自动更新时间戳(四)

postgresql 更新时间戳需要通过触发器来实现,这里给出两种方法来实现。 创建字段create_time和edit_time 通过Navicat在添加字段时候将字段设置为timestamp类型,生成时间戳方式为CURRENT_TIMESTAMP或者设置为now(),然后点击保存。 新建函数 点击函数,然后在弹出的函数向导中…