vue做购物车
写一点废话，昨天敲代码找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做购物车的更多相关文章
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- 用vue做app内嵌页遇到的坑
公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...
- vue做的第二个app
用vue做应用最好的还是组件的复用上次做饿了吗的app封装了一个评分star的组件只要引入组件传入size大小和score分数就行了,这次做豆瓣直接就就用上了不用重复写代码.不过vue做单页应用全部挂 ...
- 使用vue模拟购物车小球动画
使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- 使用vue做项目
使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包 安装完 nodejs后 我们需要执行 npm install vue-cli ...
- Vue 做项目经验
Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...
- Vue源码分析(一) : new Vue() 做了什么
Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...
- 使用vue做项目如何提高代码效率
最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习 ...
随机推荐
- P1086 花生采摘
题目描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!――熊字”. 鲁宾逊先生和多多都很开心,因为花生正是他 ...
- CentOS 文件搜索find
1.文件搜索,内置的的命令是find 用法: find [查找路径] 寻找条件 操作 默认路径为当前目录:默认表达式为 -print 2.主要参数: -name 匹配名称 -perm 匹配权限(mod ...
- Docker的安装（6-13）
摘自<Docker-从入门到实践> 一.Docker的安装 准备工作 系统要求 Docker CE 支持以下版本的 Ubuntu 操作系统: Artful 17.10 (Docker CE ...
- Android View 绘制刷新流程分析
Android中对View的更新有很多种方式,使用时要区分不同的应用场合.1.不使用多线程和双缓冲 这种情况最简单,一般只是希望在View发生改变时对UI进行重绘.你只需显式地调用View对 ...
- POJ1422：Air Raid——题解
http://poj.org/problem?id=1422 题目大意:n个点m条有向边,每条边只能走一次,往点上放人让他们走遍所有边,问至少要多少人. —————————————————————— ...
- BZOJ3521 [Poi2014]Salad Bar 【线段树 + 单调栈】
题目链接 BZOJ3521 题解 容易想到用前缀和搞 如果我们令\(p\)为\(1\),\(j\)为\(-1\),记前缀和为\(s[i]\) 我们就是要找到一段区间\([l,r]\),使得 \[\fo ...
- Java第二次实验报告——Java面向对象程序设计
北京电子科技学院(BESTI) 实 验 报 告 课程名称:java程序设计实验 班级:1352 姓名:洪韶武 学号:20135219 成绩: ...
- 学习操作Mac OS 之 常用命令
~ 符号在 Mac 甚至所有基于 Unix 和 Linux 的系统中都是代表当前用户的用户目录,.代表当前目录 配置环境变量语句: source ~/.bash_profile 查看host文件语句 ...
- ACE_Message_Block功能简介
转载于:http://www.cnblogs.com/TianFang/archive/2006/12/30/607960.html ACE_Message_Block在Ace中用来表示消息的存放空间 ...
- HDU 5643 King's Game | 约瑟夫环变形
经典约瑟夫环 }; ; i<=n; i++) { f[i] = (f[i-] + k) % i; } 变形:k是变化的 #include <iostream> #include &l ...