Vue购物车
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>商品ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-if="list.length===0">
<tr class="empty">
<td colspan="5">还没有购物，请尽情添加吧！</td>
</tr>
</template>
<template v-else>
<tr v-for="(item,index) in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price|formatPrice}}</td>
<td>
<button :disabled="item.count===1" @click="handleMinus(index)">-</button>
<input type="text" v-model="item.count"/>
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button type="button" @click="handleRemove">删除</button>
</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<td colspan="5">共{{list.length}} 件商品，总计：{{totalPrice|formatPrice}}元</td>
</tr>
</tfoot>
</table>
</div>
<script src="vue.js"></script>
<script src="mock.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el: "#app",
data: {
list: []
},
created: function() {
var data = Mock.mock({
"list|1-10": [{
"id": "@integer(1001,9999)",
"name": "@String(10,20)",
"price": "@integer(100,999)",
"count": "@integer(1,10)"
}]
});
this.list = data.list;
},
methods: {
handleMinus: function(index) {
var item = this.list[index];
item.count--;
},
handleAdd: function(index) {
var item = this.list[index];
item.count++;
},
handleRemove: function(index) {
this.list.splice(index, 1);
}
},
computed: {
totalPrice: function() {
var sum = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
sum += (item.price * item.count);
}
return sum;
}
},
filters: {
formatPrice: function(price) {
price = price.toString();
//将输入的数字转换为字符串
if (/^-?\d+\.?\d+$/.test(price)) {
//判断输入内容是否为整数或小数
if (/^-?\d+$/.test(price)) {
//判断输入内容是否为整数
price = price + ",00";
//将整数转为精度为2的小数，并将小数点换成逗号
} else {
price = price.replace(/\./, ',');
//将小数的小数点换成逗号
}
while (/\d{4}/.test(price)) {
// 判断是否有4个相连的数字，如果有则需要继续拆分，否则结束循环；
// 将4个相连以上的数字分成两组，第一组$1是前面所有的数字（负数则有符号），
// 第二组第一个逗号及其前面3个相连的数字；
// 将第二组内容替换为“,3个相连的数字，”
price = price.replace(/(\d+)(\d{3}\,)/, '$1,$2');
}
price = price.replace(/\,(\d*)$/, '.$1'); //将最后一个逗号换成小数点
}
return "￥"+ price;
}
}
})
index.css
*{margin: 0;padding: 0;}
table{
width: 800px;
margin: 0 auto;
border-spacing: 0;
}
thead{
background: #EFEFEF;
}
table,th,td{
border: 1px solid #CCCCCC;
}
th,td{
padding: 10px 20px;
}
.empty{
text-align: center; color: #FFA500;
}
Vue购物车的更多相关文章
- Vue购物车实例
<div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...
- vue 购物车练习
本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/ar ...
- vue购物车和地址选配（三）
参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...
- vue购物车功能源码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- VUE购物车示例
代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...
- vue购物车的实现
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue购物车动画效果
使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...
- 第八十三篇：Vue购物车(四) 总价计算
好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...
- 第八十二篇：Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
随机推荐
- POJ1236(KB9-A 强连通分量)
Network of Schools Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 19326 Accepted: 75 ...
- gulp前端自动化环境搭建详解
1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本 npm -v 查看np ...
- PHP中类和对象的相关函数
class_exists 判断一个类是否存在,参数为一个名字! interface_exists 判断一个接口是否存在,参数也是为一个名字! method_exists 判断一个方法是否存在! 需要两 ...
- [HNOI2011]括号修复
设\(nd[4]\) 0--多出来的右括号 1--多出来的左括号 2--取反后多出来的右括号 3--取反后多出来的左括号 这样一来 Swap: swap(0,3),swap(1,2),swap(sn[ ...
- 在Ubuntu 14.04 LTS系统中设置Apache虚拟主机（一IP多访问）
参考资料:http://os.51cto.com/art/201406/441909.htm
- 如何扩展Linux虚拟内存文件系统
由于ArcGIS GeoAnalystics Server和Raster Analytics Server大数据分析平台都是基于Spark分析平台的,其部署服务器除了要求具有高内存特点外,也需要确保相 ...
- Windows上PostGIS(压缩版)安装
PostGIS安装 1．软件下载 postgresql-9.6.1-1-windows-x64-binaries.zip https://www.postgresql.org/download/win ...
- 学习笔记（2）——实验室集群LVS配置
查看管理结点mgt的网卡信息,为mgt设置VIP [root@mgt ~]# ifconfig eth0 Link encap:Ethernet HWaddr 5C:F3:FC:E9:: inet a ...
- MySQL 8.0有什么新功能
https://mysqlserverteam.com/whats-new-in-mysql-8-0-generally-available/ 我们自豪地宣布MySQL 8.0的一般可用性. 现在下载 ...
- python被游标坑了
为了方便,这次就不单独写脚本了,直接一步一步执行下来就好了先说下游标,就是一个指针,比如我有1234每条占一行,那么初始游标默认是在1的位置,当read(1)后,游标自动向下next,现在指在2的位置 ...