教大家使用vue实现 基础购物车。

news2024/11/15 4:22:26

首先我要知道一点 其能够数据变化的  都用{{}}来进行渲染类似

来看一下实现效果

实现思路  :

1,引进 vue.js

2,setup 将声明变量 方法放在setup里面

3,用响应式声明 ref() 或rective声明 可以声明对象等等  let 也可以声明 但是 不可以与页面响应

4,渲染 加价减价

<td><button class="commodity_redu" @click="item.num--" v-show="item.num>0">-</button><span>{{item.num}}</span><button
							 @click="add_numj(item)" class="add_plus">+</button></td>

vue代码

我们可以写在行内  @click=“item.num--”

这里的 item是我们用v-for 循环过了   所以说item是第一项  v-for的写法:

v-for=“item in list” :key=“item.id”

list是我们声明的数组

5,数量的计算:  可以使用for循环 也可以使用 reduce()的方法 

看 

    let all_num = () => {

        let num = 0

      appu.value.forEach(item => {

  num += item.num })

                        return num

}

这里是数量计算

6,价格的计算:

// 价格计算

                    let all_price = () => {

                        return appu.value.reduce((a, b) => a.num * a.price + b.num * b.price);

                    }

这样写还可以简写   将括号 花扩号去除掉

看完整代码

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<style>
		* {
        margin: 0;
        padding: 0;
    }

    table {
        min-width: 66%;
        border-left: 1px solid lightgray;
        border-top: 1px solid lightgray;

        border-right: 1px solid lightgray;
        text-align: center;
        margin-left: 200px;

    }
.add_plus{
	width: 20px;
}
    .add_commodity{
        margin-left: 200px;
    }

    .edi_box{
        margin-left: 200px;

    }

    .commodity_redu {
        width: 20px;
    }

    .edi_ediitor{
        margin: 5px;
    }

    /* 延迟缓慢 */

    [v-cloak] {
        display: none;
    }
    #ggid{
        margin-left: 200px;
        
    }
	.active{
		background-color: aquamarine;
	}

</style>

	</style>

	<body>

		<div id="app" v-cloak>
			{{ message }}
			<div>{{name}}</div>
			<!-- 
			<div :style="{color:tru?'#ff0000':''}">判断三元是否为true判断</div>
			<input type="text" v-model="name"> -->


			<!-- <div v-for="(it,index) in appu":key="index">{{it.id}}{{it.name}} -->
			<!-- key的属性 -->
			<!-- <input type="text" name="" id=""> -->
			<!-- 头部删除 -->
			<!-- <button @click="appu.shift()">删除</button> -->
			<!-- </div> -->
			<!-- if,else -->
			<!-- <div v-if="tru"> -->
			<!-- <input type="text" v-model=""> -->
			<!-- </div> -->
			<!-- <div v-else="tru">为false显示</div> -->
			<!-- show -->
			<!-- <div v-show="tru">show的方法使用的是display:none</div> -->
			<!-- <button @click="tru=!tru">显示</button> -->
			<!-- <button @click="tru=!tru">隐藏</button> -->
			<!-- 数量 -->


			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>

						<td>商品</td>
						<td>价格</td>
						<td>数量</td>
						<td>操作</td>
					</tr>
				</thead>

				<!-- 循环 -->
				<tbody>
					<tr v-for="(item,index) in appu " :key="item.id" :style="{'background-color':item.num>0?'#00ff00':''}">
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td><button class="commodity_redu" @click="item.num--" v-show="item.num>0">-</button><span>{{item.num}}</span><button
							 @click="add_numj(item)" class="add_plus">+</button></td>
						<td><button class="edi_ediitor" @click="edi_ieddou(item,index)">编辑</button><button @click="deletv(appu,index)" >删除</button>
						</td>
					</tr>
				</tbody>
				<tfoot>
                    
					<tr>
						<td> </td>
						<td>总价格:¥{{all_price()}}</td>
						<td>总数量:¥{{all_num()}}</td>
						<td></td>
					</tr>
				</tfoot>
			</table>
			<!-- 添加商品 -->
			<button class="add_commodity" @click="addsp">添加商品</button>
			<div v-if="tru" class="edi_box">
				<input type="text" value="" v-model="sp">
				<input type="text" value="" v-model="sl">
				<button @click="yespush(appu,sp,sl)">确认</button>
				<button @click="closet(appu,sp,sl)">取消</button>
			</div>
			<!-- 编辑 -->
			<div v-show="bjtru" id="ggid">
				<input type="text" name="" id="" v-model="edi_data.name">
				<input type="text" name="" id="" v-model="edi_data.price">
				<button @click="edi_save">确认</button>
				<button @click="bjtru=!bjtru">取消</button>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
		<script>
			let {
				createApp,
				ref,
				reactive
			} = Vue;

			createApp({
				setup() {

					// 数据
					const appu = ref([{
							id: 1,
							name: '手机',
							num: 0,
							price: 30
						},
						{
							id: 2,
							name: '电脑',
							num: 0,
							price: 20
						}
					])

					// 新增inputv-show
					const tru = ref(false)
					//编辑inputv-show
					const bjtru = ref(false)
					// 确认v-show
					const grrp = ref(false)
					// 数量计算
					let all_num = () => {
						let num = 0
						appu.value.forEach(item => {
							num += item.num
						})
						return num
					}
					// 价格计算
					let all_price = () => {
						return appu.value.reduce((a, b) => a.num * a.price + b.num * b.price);
					}
					// 显示新增显示
					const addsp = () => {
						tru.value = true

					}
					// 加数量
					const add_numj = (item) => {
						item.num++
						grrp.value = true

						console.log(item);

					}
					// kong
					const edi_data = reactive({

						id: 1,
						name: '',
						num: 0,
						price: 0

					})
					const edi_index = ref('0')
					// 编辑回显
					const edi_ieddou = (item, index) => {
						bjtru.value = true
						Object.assign(edi_data, item)
						edi_index.value = index
					}
					// 点击保存替换
					let edi_save = () => {
						appu.value[edi_index.value] = edi_data
						bjtru.value = false
					}


					// 删除
					const deletv = (appu, i) => {
						appu.splice(i, 1)
					}
					// 点击取消
					// const sp = ref('')
					const closet = (appu, sp, sl) => {
						tru.value = false

					}

					// 点击添加
					const yespush = (appu, sp, sl) => {
						console.log(appu);
						tru.value = false
						let obj = {
							price: sl,
							name: sp,
							num: 1
						}
						appu.push(obj)
					}
					console.log(name)
					return {
						yespush,
						closet,
						deletv,
						add_numj,
					
						addsp,
						tru,
						bjtru,
						grrp,
						appu,
						all_num,
						all_price,
						edi_ieddou,
						edi_data,
						edi_save
					}

				}
			}).mount('#app')
		</script>
	</body>

</html>

 

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

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

相关文章

AST学习入门

AST学习入门 1.AST在线解析网站 https://astexplorer.net/ 1.type: 表示当前节点的类型&#xff0c;我们常用的类型判断方法t.is********(node)**,就是判断当前的节点是否为某个类型。 2**.start**:表示当前节点的开始位置 3.end:当前节点结束 4.loc : 表示当前节点所在的行…

产品推荐 | 基于Xilinx FPGA XC5VFX100T的6U VPX视频叠加板卡

01、产品概述 本板卡是基于Xilinx FPGA XC5VFX100T的6U VPX视频叠加板卡。主要用于视频叠加板具有多种高清图形输入接口&#xff0c;可实现其中两路高清视频信号的开窗显示和叠加显示功能&#xff1b;或者输出和输入图形接口的转换。 02、物理特性 ● 尺寸&#xff1a;6U CPC…

【文献阅读】AlphaFold touted as next big thing for drug discovery — but is it?

今天来精读2023年10月发在《Nature》上的一篇新闻&#xff1a;AlphaFold touted as next big thing for drug discovery — but is it? (nature.com)https://www.nature.com/articles/d41586-023-02984-w Questions remain about whether the AI tool for predicting protein …

Python Windows系统 虚拟环境使用

目录 1、安装 2、激活 3、停止 1、安装 1&#xff09;为项目新建一个目录&#xff08;比如&#xff1a;目录命名为learning_log&#xff09; 2&#xff09;在终端中切换到这个目录 3&#xff09;执行命令&#xff1a;python -m venv ll_env&#xff0c;即可创建一个名为ll…

常用的6个的ChatGPT网站,国内可用!

GPTGod &#x1f310; 链接&#xff1a; GPTGod &#x1f3f7;️ 标签&#xff1a; GPT-4 免费体验 支持API 支持绘图 付费选项 &#x1f4dd; 简介&#xff1a;GPTGod 是一个功能全面的平台&#xff0c;提供GPT-4的强大功能&#xff0c;包括API接入和绘图支持。用户可以选择免…

成都百洲文化传媒有限公司电商新浪潮的领航者

在当今电商行业风起云涌的时代&#xff0c;成都百洲文化传媒有限公司以其独特的视角和专业的服务&#xff0c;成为了众多商家争相合作的伙伴。今天&#xff0c;就让我们一起走进百洲文化的世界&#xff0c;探索其背后的成功密码。 一、百洲文化的崛起之路 成都百洲文化传媒有限…

短视频矩阵系统---php7.40版本升级自研

短视频矩阵系统---php7.40版本升级自研 1.部署及搭建 相对于其他系统&#xff0c;该系统得开发及部署难度主要在各平台官方应用权限的申请上&#xff0c;据小编了解&#xff0c;目前抖音短视频平台部分权限内侧名额已满&#xff0c;巧妇难为无米之炊&#xff0c;在做相关程序…

unity 添加newtonsoft-json

再git url上添加&#xff1a;com.unity.nuget.newtonsoft-json

手机如何设置静态IP地址显示

随着移动互联网的普及&#xff0c;手机已经成为我们日常生活中不可或缺的一部分。在连接无线网络时&#xff0c;我们有时需要设置手机的IP地址为静态&#xff0c;以满足特定的网络需求或解决某些网络问题。本文将指导您如何在手机上设置静态IP地址显示&#xff0c;让您更好地管…

二、typescript基础语法

一、条件语句 二、函数 1、有名函数 function add(x:number, y:number):number {return x y;}2、匿名函数 let add function (x:number, y:number):number {return x y;}函数可选参数 function buildName(firstname: string, lastname?:string) {if (lastname) {return fi…

蓝牙耳机哪个品牌最好?2024年热门机型推荐合集分享

​随着蓝牙耳机的普及&#xff0c;越来越多的年轻人开始追求这种无线的便利。市场上品牌众多&#xff0c;款式多样&#xff0c;选择起来确实让人眼花缭乱。我整理了一份蓝牙耳机品牌排行榜前十名&#xff0c;希望能为你提供一些参考&#xff0c;帮助你找到心仪的耳机。 一、202…

HarmonyOS实战开发-编写一个分布式邮件系统

概述 本篇Codelab是基于TS扩展的声明式开发范式编程语言编写的一个分布式邮件系统&#xff0c;可以由一台设备拉起另一台设备&#xff0c;每次改动邮件内容&#xff0c;都会同步更新两台设备的信息。效果图如下&#xff1a; 说明&#xff1a; 本示例涉及使用系统接口&#xff…

基于springboot的牙科就诊管理系统

技术&#xff1a;springbootmysqlvue 一、系统背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。这样…

mysql分页查询多用GitCode平台

目录 一、在GitCode平台AI搜索结果&#xff08;这个更优&#xff09; 二、在百度搜索输入“mysql Java分页查询”的输出结果&#xff1a; 三、推荐的文章 四、GitCode的使用 1&#xff09;如搜索jdk11可以直接下载jdk11的包 2&#xff09;搜索开源项目 3&#xff09;如搜…

学浪怎么下载视频_学浪下载视频方法

越来越多人购买了学浪课程&#xff0c;但是苦于学浪视频官方不提供下载选项&#xff0c;于是就有人做了学浪视频下载软件&#xff0c;这里就教大家如何下载你已经购买的学浪课程 本次教程用到的软件都在下面的链接 链接&#xff1a;https://pan.baidu.com/s/1y7vcqILToULrYAp…

网络: 数据链路层

数据链路层: 数据帧的封装与传输 以太网数据帧 源地址和目的地址是指网卡的硬件地址(也叫MAC地址), 长度是48位,是在网卡出厂时固化的;帧协议类型字段有三种值,分别对应IP、ARP、RARP;帧末尾是CRC校验码 以太网 "以太网" 不是一种具体的网络, 而是一种技术标准; 既…

【机器学习】一文搞懂算法模型之:Transformer

Transformer 1、引言2、Transformer2.1 定义2.2 原理2.3 算法公式2.3.1 自注意力机制2.3.1 多头自注意力机制2.3.1 位置编码 2.4 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; 你说transformer是个啥&#xff1f; 小鱼&#xff1a;嗯… 啊… 嗯…就是… 小屌…

Rust基本类型

数值类型 整数类型 无符号整数只能取正数和0&#xff0c;有符号整数可以取正数负数和0。isize和usize类型取决于程序运行的计算机CPU类型&#xff0c;若CPU是32位的&#xff0c;则这两个类型是32位的&#xff0c;若CPU是64位的&#xff0c;则它们是64位的。rust整型 默认使用…

CentOS/RHEL 6.5 上 NFS mount 挂起kernel bug

我本身有四台机器做WAS集群&#xff0c;挂载nfs&#xff0c;其中随机一台客户端计算机端口关闭释放将进入不良状态&#xff0c;对 NFSv4 挂载的任何访问都将挂起&#xff08;例如“ls&#xff0c;cd 或者df均挂起”&#xff09;。这意味着没有人并且所有需要访问共享的用户进程…

C语言例:设 int x; 则表达式 (x=4*5,x*5),x+25 的值

代码如下&#xff1a; #include<stdio.h> int main(void) {int x,m;m ((x4*5,x*5),x25);printf("(x4*5,x*5),x25 %d\n",m);//x4*520//x*5100//x2545return 0; } 结果如下&#xff1a;