写一点废话，昨天敲代码找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. Elasticsearch 更新索引settings

    1.更新索引设置:将副本减至0,修改索引分析器为ik_max_word和检索分词器为ik_smart 2.需要先将索引关闭,然后再PUT setings POST user/_close PUT us ...

  2. POJ1651：Multiplication Puzzle——题解

    http://poj.org/problem?id=1651 题目大意:同“乘法游戏”,这里将乘法游戏的题面复制过来. 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一 ...

  3. LOJ2351：[JOI2017/2018决赛]毒蛇越狱——题解

    https://loj.ac/problem/2351 参考:https://www.cnblogs.com/ivorysi/p/9144676.html 但是参考博客讲解太吓人了,我们换一种通俗易懂 ...

  4. HDOJ(HDU).1241 Oil Deposits(DFS)

    HDOJ(HDU).1241 Oil Deposits(DFS) [从零开始DFS(5)] 点我挑战题目 从零开始DFS HDOJ.1342 Lotto [从零开始DFS(0)] - DFS思想与框架 ...

  5. Ruby环境搭建

    刚接触Ruby,发现Ruby真心强大,搞了那么久的Java了,已经被Java的繁琐的语法整的无语透顶了,尤其的Java异常,设计出来就是个失败呀!Ruby目前更新到了2.x了,社区也很活跃,开发效率和 ...

  6. LoaderManager与CursorLoader用法

    一.基本概念 1.LoaderManager LoaderManager用来负责管理与Activity或者Fragment联系起来的一个或多个Loaders对象. 每个Activity或者Fragme ...

  7. bzoj 3714 [PA2014]Kuglarz 最小生成树

    [PA2014]Kuglarz Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1335  Solved: 672[Submit][Status][Di ...

  8. ACM1829并查集

    A Bug's Life Problem Description Background Professor Hopper is researching the sexual behavior of a ...

  9. POJ 1698 最大流

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

  10. CentOS 下安装Mplayer播放器（转载）

    一.准备工作 需要的安装包及下载地址:1.mplayer源代码包(MPlayer-1.0rc4.tar.bz2)下载:http://www.mplayerhq.hu/MPlayer/releases/ ...