写一点废话，昨天敲代码找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. 后缀数组SA学习笔记

    什么是后缀数组 后缀数组\(sa[i]\)表示字符串中字典序排名为\(i\)的后缀位置 \(rk[i]\)表示字符串中第\(i\)个后缀的字典序排名 举个例子: ababa a b a b a rk: ...

  2. BZOJ1565：[NOI2009]植物大战僵尸——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1565 https://www.luogu.org/problemnew/show/P2805 Pla ...

  3. BZOJ3932：[CQOI2015]任务查询系统——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3932 题面源于洛谷 题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成 ...

  4. 洛谷 CF1043F Make It One 解题报告

    CF1043F Make It One 题意 从一堆数中选择最少的数,使它们的\(\gcd=1\) 输入输出格式 输入格式 第一行:一个正整数\(n\). 第二行:\(n\)个正整数,给出了这个数列. ...

  5. HDOJ.1789 Doing Homework again (贪心)

    Doing Homework again 点我挑战题目 题意分析 给出n组数据,每组数据中有每份作业的deadline和score,如果不能按期完成,则要扣相应score,求每组数据最少扣除的scor ...

  6. codevs5037 线段树练习4加强版（暴力分块）

    求大爷教线段树怎么写啊QAQ 只会写分块...一开始脑抽写成了O(NKlogN)还被CZL大爷嘲讽了一发T T f[i][j]表示在第i块中,模k为j的数有几个,然后每次修改的时候只需要打个标记,查询 ...

  7. ContestHunter暑假欢乐赛 SRM 06

    T1二分check...为什么这么显然的我没看出来TAT,还在想倒着加入并查集check什么的,题写太多思维定势啦QAQ T2是NOIP题的弱化版...当时没看出来,写了个DP.可以看出这一位比上一位 ...

  8. 【初级算法】2.买卖股票的最佳时机 II

    题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...

  9. 题解【luoguP4053 bzojP1029 [JSOI2007]建筑抢修】

    洛谷题链 bzoj题链 PS: \(t_i\) : 在什么时候建筑 \(i\) 自爆 \(a_i\) : 修复 \(i\) 所花时间 题解 算法:贪心+堆维护 贪心策略: 直接按 \(t\) 贪心?显 ...

  10. HTML学习基本代码

    HTML的代码比较繁琐,在此记下一些基本的东西,以后自己回来看看 <html> <head> <title>我的人生啊</title> <styl ...