写一点废话，昨天敲代码找bug,找了好久都没找到，后来一哥们找到他说，找代码的bug就像男女朋友吵架，女问男你错了没，男说错啦，女再问错哪了，男傻眼了不知道错哪。在找代码的过程中一直知道我错啦就是找不到错哪了，哈哈~~~~~~

正文

用vue知识点做购物车，

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width,initial-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="stylesheet" href="./bootstrap.min.css">

	<title>computed属性实现购物车</title>

	<style>

		body{

			padding-top:100px;

			text-align:center;

		}

		thead>tr>td{

			font-weight:bold;

		}

		.num,.total{

			display:inline-block;

			width: 120px;

		}

	</style>

</head>

<body>

	<div class="container">

		<table class="table table-hover table-bordered table-striped">

			<thead>

				<tr>

					<td>商品名称</td>

					<td>商品价格</td>

					<td>商品数量</td>

					<td>小计</td>

				</tr>

			</thead>

			<tbody>

				<tr v-for="(item,index) in products">

					<td>{{item.name}}</td>

					<td>{{item.price}}</td>

					<td>

						<button @click="decrease(index)">-</button>

						<span class="num">{{item.num}}</span>

						<button @click="increse(index)">+</button>

					</td>

					<td>

						<span class="total">{{item.price*item.num}}</span>

					</td>

				</tr>

			</tbody>

			<tfoot>

				<tr>

					<td colspan="4" class="text-right">总价：{{total}}</td>

				</tr>

			</tfoot>

		</table>

	</div>

	<script src="vue.js"></script>

	<script>

		new Vue({

			el:".container",

			data:{

				products:[{

					name:"TV",

					price:2300,

					num:1

				},{

					name:"洗衣机",

					price:1500,

					num:1

				},{

					name:"拖鞋",

					price:20,

					num:2

				},{

					name:"iphone",

					price:9800,

					num:1

				}]

			},

			methods:{

				increse(index){

					this.products[index].num++

				},

				decrease(index){

					if(this.products[index].num===1)return

					this.products[index].num--

				}

			},

			computed:{

				total(){

					var sum=0;

					this.products.forEach(function(item){

						sum+=item.price*item.num;

					})

					return sum;

				}

			}

		})

	</script>

</body>

</html>

vue做购物车的更多相关文章

  1. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  2. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  3. 用vue做app内嵌页遇到的坑

    公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...

  4. vue做的第二个app

    用vue做应用最好的还是组件的复用上次做饿了吗的app封装了一个评分star的组件只要引入组件传入size大小和score分数就行了,这次做豆瓣直接就就用上了不用重复写代码.不过vue做单页应用全部挂 ...

  5. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. 使用vue做项目

    使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包  安装完 nodejs后 我们需要执行 npm install vue-cli ...

  7. Vue 做项目经验

    Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...

  8. Vue源码分析(一) : new Vue() 做了什么

    Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...

  9. 使用vue做项目如何提高代码效率

    最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习 ...

随机推荐

  1. BZOJ3997 TJOI2015组合数学（动态规划）

    copy: Dilworth定理:DAG的最小链覆盖=最大点独立集 最小链覆盖指选出最少的链(可以重复)使得每个点都在至少一条链中 最大点独立集指最大的集合使集合中任意两点不可达 此题中独立的定义即是 ...

  2. (转)超详细单机版搭建hadoop环境图文解析

                        超详细单机版搭建hadoop环境图文解析   安装过程: 一.安装Linux操作系统 二.在Ubuntu下创建hadoop用户组和用户 三.在Ubuntu下安装 ...

  3. ARC072 D Alice&Brown 博弈论

    ---题面--- 题解: 题目大意:有2堆石子数分别为x, y的石子,你每次可以从中间的某一堆中取出2i个石子,扔掉i个,并把剩下的i个放到另一堆,无法操作的人就输了. 现在给定x,y,判断先手必赢还 ...

  4. BZOJ5249：[九省联考2018]IIIDX——题解

    https://www.luogu.org/problemnew/show/P4364#sub https://www.lydsy.com/JudgeOnline/problem.php?id=524 ...

  5. 51nod 1486 大大走格子（DP+组合数学）

    枚举不合法点的思想. 把障碍x坐标为第一关键字,y坐标为第二关键字排序.f[i]表示走到第i个障碍的方案数. f[i]=C(x[i]+y[i]-2,x[i]-1)-sigma(f[j]*C(x[i]- ...

  6. 【数论数学】【P2152】【SDOI2009】Super GCD

    传送门 Description Sheng bill有着惊人的心算能力,甚至能用大脑计算出两个巨大的数的GCD(最大公约 数)!因此他经常和别人比赛计算GCD.有一天Sheng bill很嚣张地找到了 ...

  7. 【树状数组】【P3608】平衡的照片

    传送门 Description FJ正在安排他的N头奶牛站成一排来拍照.(1<=N<=100,000)序列中的第i头奶牛的高度是h[i],且序列中所有的奶牛的身高都不同. 就像他的所有牛的 ...

  8. Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

    解决方法: audio.load() let playPromise = audio.play() if (playPromise !== undefined) { playPromise.then( ...

  9. PowerDesigner 快捷键

    一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...

  10. XOR and Favorite Number （莫对算法）

    E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes input s ...