写一点废话，昨天敲代码找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. hadoop 使用Avro求最大值

    在上例中:hadoop MapReduce辅助排序解析,为了求每年的最大数据使用了mapreduce辅助排序的方法. 本例中介绍利用Avro这个序列化框架的mapreduce功能来实现求取最大值.Av ...

  2. Java.util包简单总结

    Java.util包简单总结 1. util包的框架 常用的集合类主要实现两个“super接口”而来:Collection和Map. 1.1 Collection有两个子接口:List和Set è¿é ...

  3. [Leetcode] valid sudoku 有效数独

    Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...

  4. lighttpd - 配置

    Lighttpd core 配置 connection.kbytes-per-second     限制每一个链接的速度etag.use-inode                   Etag使用i ...

  5. 从零开始学Linux系统（二）之基本操作指令

    ifconfigping ip地址帮助:ping -t ip地址ping -c 次数 ip地址ping -s 包的大小关机重启:shutdown -h now reboot清屏:clear  == C ...

  6. Change FZU - 2277 毒瘤啊 毒瘤题目

    There is a rooted tree with n nodes, number from 1-n. Root’s number is 1.Each node has a value ai. I ...

  7. [dhcpd]清除dhcp缓存

    修改了dhcp的default-lease-time && max-lease-time 清除缓存: rm /var/lib/dhcpd.leases~ echo "&quo ...

  8. bzoj 1068 [SCOI2007]压缩 区间dp

    [SCOI2007]压缩 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1644  Solved: 1042[Submit][Status][Discu ...

  9. swiper 、css3制作移动端网站，折叠导航

    swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...

  10. 51Nod 1003 阶乘后面0的数量 | 思维

    题意:n的阶乘后面0的个数,如果直接算出阶乘再数0的数量一定会超时的. 因为10=2*5,所以求出5贡献的次数就行. #include "bits/stdc++.h" using ...