vue（购物车案例）

最新推荐文章于 2021-05-19 15:29:04 发布
最新推荐文章于 2021-05-19 15:29:04 发布
阅读量172 收藏
点赞数
分类专栏： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/103233980
版权
前端 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
vue
35 篇文章 0 订阅
订阅专栏

 

css代码

<style>
			table{
				border: 1px solid #e9e9e9;
				border-collapse: collapse;
				border-spacing: 0;
			}
			th ,td{
				padding: 8px 16px;
				border: 1px solid #e9e9e9;
				text-align: left;
			}
			th{
				background-color: #f7f7f7;
				color: #5c6b77;
				font-weight: 600;
			}
		</style>

html代码

<div id="root">
			<div v-if="books.length">
				<table>
				<thead>
					<tr>
						<th  v-for="item in head">{{item}}</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.data}}</td>
						<td>{{item.price|showPrice}}</td>
						<td>
							<button @click="subtract(index)" :disabled="item.count===1">-</button>
							{{item.count}}
							<button @click="add(index)">+</button>
						</td>
						<td>
							<button @click="cancel(index)">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
				<h2>总价格：{{totalPrice|showPrice}}</h2> <!--//过滤器-->
			</div>
			<div v-else>
				<h2>购物车为空</h2>
			</div>
        </div> 

 

vue代码

<script>
            new Vue({
                el:"#root",
                data:{
					head:["","书籍名称","出版日期","价格","购买数量","操作"],
					books:[{
						id:1,
						name:"《算法导论》",
						data:"2006-2",
						price:"85",
						count:1
					},
					{
						id:2,
						name:"《UNIX编程艺术》",
						data:"2006-9",
						count:1,
						price:"59"
					},
					{
						id:3,
						name:"《编程珠玑》",
						data:"2008-10",
						count:1,
						price:"39"
					},
					{
						id:4,
						name:"《代码大全》",
						data:"2006-3",
						count:1,
						price:"128"
					},
					]
                },
                methods:{
                   subtract(index){
//						if(this.books[index].count>1)
							this.books[index].count=this.books[index].count-1;
					},
					add(index){
						this.books[index].count=this.books[index].count+1;
					},
					cancel(index){
						this.books.splice(index,1);
					}
                },
				computed:{
//					1.-----------------------------------------------
//					totalPrice(){
//						let sum=0;
//						for(let i=0;i<this.books.length;i++){
//							sum+=this.books[i].price*this.books[i].count;
//						}
//						return sum;
//					}
					//2.---------------------------------------------
//					totalPrice(){
//						let sum=0;
//						for(let i in this.books){
//							const book=this.books[i];
//							sum+=book.price*book.count;
//						}
//						return sum;
//					}
//				},
					//3.---------------------------------------------
//					totalPrice(){
//						let sum=0;
//						for(let item of this.books){
//							sum+=item.price*item.count;
//						}
//						return sum;
//					}
					//4.高级函数---------------------------------------------
					totalPrice(){
						return this.books.reduce(function(preValue,book){
							return preValue + book.price * book.count;
						},0)
					}
					
				},
				filters:{
					showPrice(price){
						price=Number(price);
						return '￥'+price.toFixed(2);
					}
				}
            })
        </script>

总代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			table{
				border: 1px solid #e9e9e9;
				border-collapse: collapse;
				border-spacing: 0;
			}
			th ,td{
				padding: 8px 16px;
				border: 1px solid #e9e9e9;
				text-align: left;
			}
			th{
				background-color: #f7f7f7;
				color: #5c6b77;
				font-weight: 600;
			}
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<div v-if="books.length">
				<table>
				<thead>
					<tr>
						<th  v-for="item in head">{{item}}</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.data}}</td>
						<td>{{item.price|showPrice}}</td>
						<td>
							<button @click="subtract(index)" :disabled="item.count===1">-</button>
							{{item.count}}
							<button @click="add(index)">+</button>
						</td>
						<td>
							<button @click="cancel(index)">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
				<h2>总价格：{{totalPrice|showPrice}}</h2> <!--//过滤器-->
			</div>
			<div v-else>
				<h2>购物车为空</h2>
			</div>
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					head:["","书籍名称","出版日期","价格","购买数量","操作"],
					books:[{
						id:1,
						name:"《算法导论》",
						data:"2006-2",
						price:"85",
						count:1
					},
					{
						id:2,
						name:"《UNIX编程艺术》",
						data:"2006-9",
						count:1,
						price:"59"
					},
					{
						id:3,
						name:"《编程珠玑》",
						data:"2008-10",
						count:1,
						price:"39"
					},
					{
						id:4,
						name:"《代码大全》",
						data:"2006-3",
						count:1,
						price:"128"
					},
					]
                },
                methods:{
                   subtract(index){
//						if(this.books[index].count>1)
							this.books[index].count=this.books[index].count-1;
					},
					add(index){
						this.books[index].count=this.books[index].count+1;
					},
					cancel(index){
						this.books.splice(index,1);
					}
                },
				computed:{
//					1.-----------------------------------------------
//					totalPrice(){
//						let sum=0;
//						for(let i=0;i<this.books.length;i++){
//							sum+=this.books[i].price*this.books[i].count;
//						}
//						return sum;
//					}
					//2.---------------------------------------------
//					totalPrice(){
//						let sum=0;
//						for(let i in this.books){
//							const book=this.books[i];
//							sum+=book.price*book.count;
//						}
//						return sum;
//					}
//				},
					//3.---------------------------------------------
//					totalPrice(){
//						let sum=0;
//						for(let item of this.books){
//							sum+=item.price*item.count;
//						}
//						return sum;
//					}
					//4.高级函数---------------------------------------------
					totalPrice(){
						return this.books.reduce(function(preValue,book){
							return preValue + book.price * book.count;
						},0)
					}
					
				},
				filters:{
					showPrice(price){
						price=Number(price);
						return '￥'+price.toFixed(2);
					}
				}
            })
        </script>
    </body>
</html>

 

 

 

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 购物车案例
weixin_43748615的博客
02-14 609
Vue 购物车案例 该购物车主要实现了全选、数量加减、自动计算总金额、删除等功能 代码如下： html部分 <div id="app"> <h3>购物车</h3> <div class="box" v-for="(item,index) in list" v-if="item.list.length>0"> <h4 class=...
Vue购物车案例（基于组件）
代码在路上的博客
02-03 844
效果图如下： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container .cart { width: 300px; margin: auto; } .container .title
vue开发购物车完整示例
09-14
vue开发的购物车组件，可全选单选，并可以删除单项，总金额显示
vue-购物车实例
05-02
这是一个Vue实例，其主要实现一个简单的购物车功能。用于实践Vue的数据绑定，条件，循环，父子通信，组件化等功能。 这个实例详细的实现说明，可查看博客：https://blog.csdn.net/xufang461010923/article/details/89743564
vue 小案例购物车
小羽向前跑
02-26 490
最终效果 HTML部分： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;shopcar.html&lt;/title&gt; &lt;script src="https://c
前端Vue实现购物车案例
04-08
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤： 1、下载资源，使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
vue实现购物车小案例
12-13
本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下 最终效果 HTML部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
Vue购物车案例初始文件资料
05-04
Vue购物车案例初始文件资料
vue实现购物车案例
10-15
主要介绍了vue实现购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中购物车的案例
卓卓卓
06-29 1212
‘点击加’增加购物数量，同时’总价’也会改变;点击删除会删除该一行的商品 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../font.css"/><!--font.css样式--> <scri
Vue实现购物车案例
weixin_42345596的博客
04-16 448
今天的小案例，用Vue实现购物车小案例，下面是代码以及效果图： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href...
Vue基础语法【下】
个人博客 | 看博客描述联系我
05-19 205
10.阶段性案例 - 图书购物车 10.1.界面的搭建（代码） 10.1.1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="mai
vue实现购物车案例【基础版】
weixin_43999753的博客
11-06 2090
vue实现购物车功能 功能点： 1.购买数量增加和减少 2.价格保留2为小数 3.购物车为空时显示“购物车为空” 4.计算购物车总价格 <template> <div class="Test"> <div v-if="books.length"> <table> <thead> <tr> <th></th> .
vue项目中调用百度地图api
热门推荐
奔跑的搬运工
03-19 1万+
本想在项目中配送区域模块中是使用，结果被老大ps,记录下吧！1.首先去百度。[百度地图API ] : http://lbsyun.baidu.com/apiconsole/key 申请密钥（ak) ,此次使用v1.5以后版本。 2. 在项目的index.html中引用js文件! 上图中 ak=申请的密钥 3.在 webpack.config.js 配置文件中配置BMap，在m
Vue.js学习笔记（二）
greenhand_coder
02-01 247
1.v-if v-else v-else-if 代码用法： <body> <div id="app"> <div v-if="score >= 90">优秀</div> <div v-else-if="score >= 80">良好</div> <div v-else-if="score >= 60">及格</div> <div v-else>不及格&
vue学习记录-08(一) 书籍购物车案例
Aaron的博客
01-07 130
vue学习记录-08(一) 书籍购物车案例 这篇文章是根据codewhy老师在b站的视频进行的学习记录 文章目录vue学习记录-08(一) 书籍购物车案例完整案例代码HTML：JS:CSS: 完整案例代码 HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
Vue.js学习笔记（第二弹）
weixin_41325924的博客
05-03 434
1.计算属性setter和getter computed属性默认是下面是这样的，但是它是有Get 和 Set属性的 <script> const app = new Vue({ el:'#app', data:{ FirstName:'AA', lastName:'BB' }, computed:{ fullName:function(){ ...
vue监听购物车数量和金额变化以及物品模糊查询
qq_44832960的博客
01-22 685
简单的html 没有写样式 <div> <div> <input type="text" placeholder="请输入" v-model="input"> </div> <table> <thead> <tr> <td>名称</td&gt
vue购物车案例
最新发布
06-01
好的，下面是一个简单的Vue购物车案例： 首先，我们需要创建一个Vue实例，并在data属性中定义一个数组，用于存放购物车中的物品： ``` new Vue({ el: '#app', data: { cartItems: [] } }) ``` 接下来，我们...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值