43.vue第一阶段小练习（自己做一个购物车页面）

鹏哥哥啊Aaaa

已于 2022-03-09 18:12:50 修改

阅读量295

点赞数

分类专栏：从头开始学编程文章标签： vue

于 2020-11-25 11:49:40 首次发布

本文链接：https://blog.csdn.net/qq_40594696/article/details/110119688

版权

从头开始学编程专栏收录该内容

202 篇文章 3 订阅 ¥99.90 ¥99.00

订阅专栏

超级会员免费看

代码放到码云上了，可以自己拉取：vueTest: vue基本内容代码

作为后端程序员，你如何认真看了前两章的内容，那么这边的小练习来看看吧

一、小练习二

1.对于一个图书购物车，你点击”+”，那本书数量+1，总价加上那本书的金额。“-”同理。

2.点击移除，那本书移除。

3.如果整个购物车没有图书，显示一行文字

我们先来搭一个架子：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入style.css -->
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="app">
			<div v-if=&

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鹏哥哥啊Aaaa

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
43.vue第一阶段小练习（自己做一个购物车页面）

自己做一个购物车页面
复制链接

扫一扫

专栏目录

订阅专栏

解决vue项目中某一页面不想引用公共组件app.vue的问题

10-14

主要介绍了解决vue项目中某一页面不想引用公共组件app.vue的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue计算属性computed之购物车商品结算案例

wanglingli95的博客

03-22

2467

一、需求说明：实现页面基本布局。单击“+”按钮时，对应商品的数量增加，当单击“-”按钮时，对应商品的数量减少，当数量减少到1时，“-”按钮无法再进行操作。每个对应商品后面都有一个“移除”按钮，当单击“移除”按钮时，当前商品列表项会删除，页面效果图如下：二、实现过程： HelloWorld.vue代码示例： <template> <div> <table id="mytable"> <thead> .

参与评论您还未登录，请先登录后发表或查看评论

vue--实现简易版的购物车

小白小白从不日别的博客

12-11

3384

目录 1.先搭好页面的基本布局： 2.渲染表格里面的内容 3.实现全选功能 4.实现数量的加减功能 5.实现点击删除功能 6. 显示总价在这个案例里我们把表格里面的数据也就是 tr进行封装成一个组件，然后通过 v-for 循环进行重复利用大致步骤如下： 1.先搭好页面的基本布局：将头部和尾部部分在 App.vue 里进行基本的搭建需要单独封装处理的 tr 封装成 MyTr.vue 组件，然后在 App.vue 里进行注册和引入，这里需要注意的是：DOM模板限...

用Vue框架实现购物车和记事本功能的步骤及解析

m0_63851202的博客

01-08

538

购物车 购物车需求如下： 1：实现金额运算，金额=单价*数量 2：实现数量的加减功能 3：点击全选按钮，所有商品的复选框按钮点亮 4：再次点击全选按钮，所有商品的复选框按钮熄灭 5：只要有一个商品未被勾选，则全选复选框熄灭，所有商品都勾选，则全选自动点亮 6：点击删除，则删除当前商品 7：实现总计，为勾选的商品的金额之和代码实现如下： HTML部分 <table border="1" cellspacing="0"> <tr> <!-

《Vue.js实战》-购物车示例-练习

u014773932的博客

06-01

520

练习 1 : 在当前示例基础上扩展商品列表 ,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价 , 同时提供一个全选的按钮。练习 2 : 将商品列表 list 改为一个二维数组来实现商品的分类 ,比如可分为“电子产品”“生活用品”和“果蔬” , 同类商品聚合在一起。提示,你可能会用到两次 v-for 。 ...

wepy vue 小程序购物车实现方案

艾小逗

05-29

430

wepy vue 小程序购物车实现方案目录wepy vue 小程序购物车实现方案需求：购物车功能实现结果如下图实现：两种方法简单介绍第1种：减1和加1代码一样简单介绍第2种：减1和加1代码一样商品页和购物车页面搜索页面需求：购物车功能超市添加购物车，可在购物车、搜索页和商品页中添加删除实现结果如下图实现：两种方法简单介绍第1种：减1和加1代码一样每次添加删除都会遍历一遍购物车的数据（提交数据时方便，添加删除麻烦，不知道有什么好的方法），这种方法购物车数据和商品数据结构一致。 let good

Vue购物车实例练习

MrFlySand的博客

05-22

1012

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

Vue实现简单购物车功能

云

02-18

7881

【代码】Vue实现简单购物车功能。

Vue3+TS+移动端-购物车实现详细步骤+项目优化

shi15926lei的博客

12-09

5122

vue3购物车详情思路,再加项目优化

Vue综合练习

小源同学的博客

02-20

300

综合练习需求显示所有用户删除用户动态添加用户关于样式【写的稍微好看点】我们使用layui  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">  <script src="//unpkg.com/layui@2.6.8/dist/layui.js"> 第一

Vue实现简易购物车功能

YY的博客

11-22

8376

Vue实现简易购物车功能

使用Vue.js和Element-UI做一个简单登录页面的实例

10-18

下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

10-16

主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

vue在App.vue文件中监听路由变化刷新页面操作

10-14

主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

一个使用vue做的门户网站模板.zip

05-14

一个使用vue做的门户网站模板一个使用vue做的门户网站模板一个使用vue做的门户网站模板一个使用vue做的门户网站模板一个使用vue做的门户网站模板一个使用...

用vue写一个购物车界面

weixin_35752122的博客

02-13

172

我可以给你一些建议：1. 使用Vue CLI来创建一个项目；2. 在项目中添加Vue Router以实现路由功能；3. 使用Vuex来管理购物车中的数据；4. 在界面上使用Vue组件来实现购物车的功能；5. 最后，使用Vue的绑定语法来将购物车中的数据渲染到界面上。 ...

Vue2项目实战：尚品汇（三）商品详情界面、加入购物车成功界面、购物车界面

DogEgg_001的博客

10-09

3645

用户在搜索页点击商品图片就会跳转到商品详情页，商品信息根据商品id向服务器请求数据动态展示出。

VUE案例练习（一）

lixu_1030的博客

08-23

474

vue练习 1 vue的入门案例 <div id="app"> {{hello}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { hello: "hello" } }) </script> 2 数据展现 2.1 v-clo

Vue练习3：组件开发3（页面切换）

最新发布

前端萌新

02-16

986

组件第一层未设置样式（pager-container）首页跳转，单页跳转，末页跳转。每次必显示可见页码数。

用vue框架实现一个购物车页面

03-31

由于我是AI语言模型，无法直接实现代码，以下是用Vue框架实现购物车页面的一些指导： 1. 首先，需要创建一个Vue实例。可以通过Vue CLI或手动引入Vue库来创建。 2. 创建一个包含购物车商品信息的数组。每个商品应该包括名称、价格、数量和图片等信息。 3. 在Vue实例中定义一个data属性，将创建的购物车商品数组赋值给它。例如： ``` data: { cartItems: [ { name: '商品1', price: 10, quantity: 2, image: 'image1.jpg' }, { name: '商品2', price: 20, quantity: 1, image: 'image2.jpg' }, { name: '商品3', price: 30, quantity: 3, image: 'image3.jpg' }, ] } ``` 4. 在Vue模板中使用v-for指令循环渲染购物车商品列表。例如： ``` <div v-for="item in cartItems" :key="item.name"> <img :src="item.image"> <h3>{{ item.name }}</h3> <p>单价：{{ item.price }}元</p> <p>数量：{{ item.quantity }}</p> <p>小计：{{ item.price * item.quantity }}元</p> </div> ``` 5. 添加购物车商品数量的增减功能。可以使用v-model指令绑定商品数量的值，然后通过方法实现增减功能。例如： ``` <div v-for="item in cartItems" :key="item.name"> ... <button @click="decreaseQuantity(item)">-</button> <input type="number" v-model="item.quantity"> <button @click="increaseQuantity(item)">+</button> ... </div> methods: { increaseQuantity(item) { item.quantity++; }, decreaseQuantity(item) { if (item.quantity > 1) { item.quantity--; } } } ``` 6. 添加总价和结算功能。可以通过计算属性计算购物车商品的总价，并在模板中显示。然后添加一个结算按钮，点击后触发一个方法，弹出提示框或跳转到结算页面。例如： ``` <div> ... <p>总价：{{ totalPrice }}元</p> <button @click="checkout">结算</button> </div> computed: { totalPrice() { return this.cartItems.reduce((total, item) => { return total + item.price * item.quantity; }, 0); } }, methods: { checkout() { // 弹出提示框或跳转到结算页面 } } ``` 以上是用Vue框架实现购物车页面的基本步骤和代码示例。具体实现可能会因需求和实际情况有所不同。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交