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做项目之后,以前使用面向过程变成的习 ...
随机推荐
- [洛谷P4777]【模板】扩展中国剩余定理（EXCRT）
题目大意:给你一些关于$x$的方程组:$$\begin{cases}x\equiv a_1\pmod{mod_1}\\x\equiv a_2\pmod{mod_2}\\\vdots\\x\equiv ...
- bzoj 1037: [ZJOI2008]生日聚会Party （dp)
dp,但是要顺推容易点 const mm=; var f:..,..,..,..]of longint; n,m,kk,now,sum,i,j,k1,k2:longint; function max( ...
- CodeForces 185A. Plant (矩阵快速幂)
CodeForces 185A. Plant (矩阵快速幂) 题意分析 求解N年后,向上的三角形和向下的三角形的个数分别是多少.如图所示: N=0时只有一个向上的三角形,N=1时有3个向上的三角形,1 ...
- github clone 指定的tag
git clone --branch [tags标签] [git地址] 使用branch参数,后面加上tag标签,最后是git仓库的地址
- JSP页面中的Meta标签详解
Meta标签详解 相信大家在平时开发中最常接触的页面就是html和jsp了,可在这两个页面中有一个Meta标签你天天都会看见,可是你真的了解这个标签的一些其他用处吗?今天给大家介绍一些该标签的其他应用 ...
- 第六章 指针与const
const一词在字面上来源于常量constant,const对象在C/C++中是有不同解析的,如第二章所述,在C中常量表达式必须是编译期,运行期的不是常量表达式,因此C中的const不是常量表达式:但 ...
- bzoj 1568 [JSOI2008]Blue Mary开公司 超哥线段树
[JSOI2008]Blue Mary开公司 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 1808 Solved: 639[Submit][Sta ...
- hbase监控简单实用脚本
我们以前使用过的对hbase和hdfs进行健康检查,及剩余hdfs容量告警,简单易用 1.针对hadoop2的脚本: #/bin/bashbin=`dirname $0`bin=`cd $bin;pw ...
- git branch 重命名
有时候你会有重命名一个git branch的冲动,不要怀疑,这是真的.command bellow will give u a big help,no thanks~ git branch - m o ...
- 神奇的sed替换
1. 替换含有某关键字的行 $ sed 's/.*ami-07bc4ae4d4d662f53.*/ami = "ami-07bc4ae4d4d662f53898989898989" ...