写一点废话，昨天敲代码找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. hdu 2768 Cat vs. Dog (二分匹配)

    Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. hdu 3191 How Many Paths Are There (次短路径数)

    How Many Paths Are There Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  3. hdu 3015 Disharmony Trees (离散化+树状数组)

    Disharmony Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. P1315 观光公交

    题目描述 风景迷人的小城Y 市,拥有n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第 0 分钟出现在 1号景点,随后依次前往 2 ...

  5. Codeforces ZeptoLab Code Rush 2015 D.Om Nom and Necklace(kmp)

    题目描述: 有一天,欧姆诺姆发现了一串长度为n的宝石串,上面有五颜六色的宝石.他决定摘取前面若干个宝石来做成一个漂亮的项链. 他对漂亮的项链是这样定义的,现在有一条项链S,当S=A+B+A+B+A+. ...

  6. 从APNIC提取IP信息

    从APNIC提取IP信息 https://blog.csdn.net/nullzeng/article/details/17538009 Apnic介绍简而言之,Apnic是全球5个地区级的Inter ...

  7. Javascript基础之-强制类型转换（二）

    思考下面这个问题: console.log(+"123"); // 123 console.log(-"123"); // -123 console.log(+ ...

  8. Sql Server 2008 R2 数据库脚本导出方法

    经常忘记怎么搞,截几张图记录一下. 1 选中要导出的数据库,右键—>任务—>生成脚本 2 3 4 查看保存的脚本

  9. Friendship POJ - 1815 基本建图

    In modern society, each person has his own friends. Since all the people are very busy, they communi ...

  10. POJ 1698 最大流

    Alice's Chance Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7327   Accepted: 2992 De ...