Vue框架开发一个简单的购物车(Vue.js)

news/2024/11/28 6:39:10/

让我们利用所学知识来开发一个简单的购物车

(记得暴露属性和方法!!!)

首先来看一下最基本的一个html框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实战小项目:购物车</title><style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;border-radius: 10px;background-color: #ddd;}.buttons {margin-top: 5px;}.buttons button {padding: 5px 10px;margin-right: 5px;font-size: 16px;cursor: pointer;border: none;border-radius: 3px;background-color: pink;}.buttons input {width: 25px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示:可以使用v-for指令,假设有n个品类,则生成n个商品项--><div class="cart-item"><div class="buttons"><span>苹果 &nbsp;&nbsp;</span><button>-</button><span class="quantity">1&nbsp;&nbsp;</span><button>+</button><p>请输入价格:<input type="text"/> 元/斤 <br> 单价:1 元/斤</p></div></div><!-- 提示:可以用计算属性或数据变动侦听器,跟踪商品数和单价的变化,进而求出总数和总价--><h3>商品总数:  <ins> 1 </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性:存储商品的(响应式)数组 // 2.定义方法:增加商品数// 3.定义方法:减少商品数// 4.定义方法:计算商品总数// 5.定义方法:计算商品总价// 6.暴露属性和方法}}).mount('#app');</script>
</body>
</html>

效果如下:

目前是一个静态的一个网页

首先定义属性:存储商品的(响应式)数组(使用v-for遍历

  <div class="cart-item" v-for="(item,index) in cartItems">const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },]);

我们可以发现我们已经做出了三个链接,但是名字都是苹果,这个时候我们添加一个插值即可

<span>{{item.name}}&nbsp;&nbsp;</span>

那么我们如何控制商品的增加和减少呢

我们只需要定义一个函数 并且使用v-on的方法绑定即可,事件触发为点击

注意:在做减少按钮时,我们要通过if判断限制一下商品数,否则会出现负数

 <button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</span><button v-on:click = "next(index)">+</button>// 2.定义方法:增加商品数const next = (index) =>{cartItems[index].quantity ++;}                             // 3.定义方法:减少商品数const pre = (index) => {if ( cartItems[index].quantity>1) {cartItems[index].quantity --;}}

接着我们要计算商品的总数,那么该如何计算呢

可以用计算属性数据变动侦听器,跟踪商品数和单价的变化,进而求出总数和总价

   <h3>商品总数:  <ins> {{totalItem()}} </ins> 件</h3>// 4.定义方法:计算商品总数const totalItem = () =>{let total_items = 0 ;for(const item of cartItems){total_items +=item.quantity;}return total_items}

计算完总数,我们就该来计算总价了,同理可得使用computer计算属性,定义一个变量,在函数里面写一个for遍历即可(输入框里面属于写一个双向绑定v-model从而实现单价变化总价随着变化)

        <input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> <h3>商品总价:  <ins> {{totalprice}} </ins> 元</h3>// 5.定义方法:计算商品总价const totalprice = computed(()=>{let total_price = 0;  for(const money of cartItems){  total_price += money.unit_price*money.quantity;  }return total_price  })

这样我们一个简单的购物车便开发成功啦

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实战小项目:购物车</title><style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;border-radius: 10px;background-color: #ddd;}.buttons {margin-top: 5px;}.buttons button {padding: 5px 10px;margin-right: 5px;font-size: 16px;cursor: pointer;border: none;border-radius: 3px;background-color: pink;}.buttons input {width: 25px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示:可以使用v-for指令,假设有n个品类,则生成n个商品项--><div class="cart-item" v-for="(item,index) in cartItems"><div class="buttons"><span>{{item.name}}&nbsp;&nbsp;</span><button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</span><button v-on:click = "next(index)">+</button><p>请输入价格:<input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 单价:1 元/斤</p></div></div><!-- 提示:可以用计算属性或数据变动侦听器,跟踪商品数和单价的变化,进而求出总数和总价--><h3>商品总数:  <ins> {{totalItem()}} </ins> 件</h3><h3>商品总价:  <ins> {{totalprice}}</ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性:存储商品的(响应式)数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },]);// 2.定义方法:增加商品数const next = (index) =>{cartItems[index].quantity ++;}                             // 3.定义方法:减少商品数const pre = (index) => {if ( cartItems[index].quantity>1) {cartItems[index].quantity --;}}// 4.定义方法:计算商品总数const totalItem = () =>{let total_items = 0 ;for(const item of cartItems){total_items +=item.quantity;}return total_items}// 5.定义方法:计算商品总价const totalprice = computed(()=>{let total_price = 0; for(const money of cartItems){  total_price += money.unit_price*money.quantity;  }return total_price   })// 6.暴露属性和方法return {cartItems,pre,next,totalItem,totalprice,};},}).mount('#app');</script>
</body>
</html>


http://www.ppmy.cn/news/1550552.html

相关文章

Rust语言俄罗斯方块(漂亮的界面案例+详细的代码解说+完美运行)

tetris-demo A Tetris example written in Rust using Piston in under 500 lines of code 项目地址: https://gitcode.com/gh_mirrors/te/tetris-demo 项目介绍 "Tetris Example in Rust, v2" 是一个用Rust语言编写的俄罗斯方块游戏示例。这个项目不仅是一个简单…

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…

【React】React 组件通信:多种方式与最佳实践

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 React 组件通信&#xff1a;多种方式与最佳实践组件通信的基本概念父子组件通信…

责任链模式在spring security过滤器链中的应用

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许多个对象按照顺序处理请求&#xff0c;并且每个对象可以选择自己是否处理该请求或将其传递给下一个对象。 在Spring Security中&#xff0c;责任链模式得到了广泛应…

C++多线程——线程

1、线程与进程 进程是一个具有独立功能程序的运行实体&#xff0c;如某一个程序&#xff0c;运行时便产生一个进程&#xff1b;通常一个进程包含一个或多个线程。普通C程序多是只含有一个线程的进程&#xff0c;但是大多数情况下遇到的是多线程的进程。 线程与进程都是操作系统…

IDEA自定义帆软函数步骤详解

前序: 在帆软里面有很多内置函数可以供我们使用,比如计算总和的SUM()函数, 计算绝对值的ABS()函数等等,但是很多时候随着业务的复杂性,这些函数已经不满足于我们复杂的计算要求,所以我们可以自定义一些函数来满足我们的需求。 自定义函数列表 (一)如何新增自定义函数 …

urllib3只支持OpenSSL1.1.1

1 现象 urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ssl module is compiled with OpenSSL 1.1.0j 20 Nov 2018.2 解决方法 降低urllib3的版本。 从pycharm中&#xff0c;先卸载原有的urllib3版本。 菜单“File|Settings|Project:python|Project Interprete…

探寻嵌入式系统的发展之路与趋势展望

目录 一、嵌入式系统的发展历程 1.1. 早期阶段&#xff08;20世纪40年代至70年代初&#xff09; 1.1.1. 起源与背景 1.1.2. 特点 1.1.3. 应用领域 1.1.4. 发展里程碑 1.2. 单片机时代&#xff08;20世纪70年代初至80年代末&#xff09; 1.2.1. 硬件 1.2.2. 软件 1.2.…