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做项目之后,以前使用面向过程变成的习 ...
随机推荐
- ADC关键性能指标及误区
ADC关键性能指标及误区 由于ADC产品相对于网络产品和服务器需求小很多,用户和集成商在选择产品时对关键指标的理解难免有一些误区,加之部分主流厂商刻意引导,招标规范往往有不少非关键指标作被作为必须符合 ...
- POJ1061：青蛙的约会——题解
http://poj.org/problem?id=1061 Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定 ...
- BZOJ2697 特技飞行 【贪心】
题目链接 BZOJ2697 题解 好水好水的贪心... 容易发现每种特技只表演两次,多表演没有意义,而且差距越长收益越大 然后就可以贪,最大的放两端,次大的往里,然后是第三大....... 证明很简单 ...
- 项目管理---git----快速使用git笔记(七)------coding.net项目管理多人操作的流程规范--合并代码审核
我们在前面已经介绍了coding.net和本地git的基本用法. 但是多人协作开发时情况会复杂得多,所以我们最好有一些规范来保证项目多人开发顺利进行. 比如说 规范一 master代码分支 需要开启 ...
- YBT 1.2 二分与三分
二分与三分: 二分(单调性),三分(单峰性),这章主要考数学,模拟,与读题!!! 链接: https://pan.baidu.com/s/1AJTl_0p5Lh4T1MmNwyJWzg 密码: j3j ...
- django 给前端传递HTML内容
django从view向template传递HTML字符串的时候,django默认不渲染此HTML,原因是为了防止这段字符串里面有恶意攻击的代码. 如果需要渲染这段字符串,需要在view里这样写: f ...
- 工作中常用的Linux命令（不断更新中）
最近工作中用到linux命令,简单总结如下: 1. pwd 查看当前所在的文件路径 2. cd 切换目录 cd .. 切换到上一级目录 3. ls 列出当前文件路径下的所有文件和文件夹 4. ll 是 ...
- springcloud文章推荐
有幸加入到springcloud中国社区,在这里获取到了不一样的技术,也接触到了不少的大牛! 这篇文章对于springcloud能否在企业中应用或者对springcloud想了解的人个人感觉写的非常好 ...
- bzoj [POI2007]旅游景点atr 状态压缩+Dij
[POI2007]旅游景点atr Time Limit: 30 Sec Memory Limit: 357 MBSubmit: 2258 Solved: 595[Submit][Status][D ...
- NYOJ 737DP
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的 ...