index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div ></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;
}